입력양식 태그

27174 단어 htmlhtml

입력양식

  • form태그
    <form>태그로 묶으면 안에 질문, 선택사항, 답변작성공간 등이 배치된다.
    • 함께 사용되는 대표적인 속성.
      • action과 method
        action은 데이터를 보낼 URL지정.
        method는 보내는 ㅈ방식을 지정. GET/ POST를 값으로 가짐.
  • GET과 POST
    사용자가 서버로 데이터를 전송할 때 데이터는 HTTP Request Message라는 메세지에 담겨 보내진다. 이 때 메세지는 Header와 Body 두 부분으로 나뉘어진다.
    • GET방식
      메세지의 Header에 데이터의 목적지가 되는 서버의 URL이 작성되고 URL 에 이어서 숨김 없이 보낸다.
    • POST방식
      데이터를 URL 뒤에 붙이지않고 Body 부분에 숨겨서 보낸다.
  • GET과 POST가 따로 사용되는 이유
    GET은 '받다'라는 뜻 그래도 서버에 데이터를 요청하고 데이터를 받아오는 역할을 수행한다. 즉 데이터 조회의 목적.
    POST는 '게시하다'라는 뜻처럼 서버에 있는 데이터를 쓰거나 수정, 삭제할 때 사용한다. 예시로는 게시물 작성이 있다. 만약 게시물 작성, 수정, 삭제가 GET으로 이뤄진다면 주소만으로 게시물이 삭제가 되거나 본인의 것이 아닌 계정으로 로그인을 하는 문제가 발생할 수 있다. 즉 데이터 보안이 필요할 경우 사용된다.
  • input태그
    사용자의 입력을 받기위해 사용되며, 빈 태그이다.
    type이라는 속성에 따라 어떤 값을 입력할 것인지 결정할 수 있다.
    입력 받은 데이터를 구분하기 위해서 name 속성은 키(key), 입력 받은 데이터를 값(value)으로 전송.
    placeholder 속성은 가이드 문구 지정을 위해 사용된다. 만약 placeholder 대신 value 속성을 사용하게 되면 속성값이 초기값으로 들어가게 된다.
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <input type="search" name="search" placeholder="검색어를 입력해주세요.">
   <input type="button" value="검색">
   <p>
       <input type="radio" name="sex" value="남성" checked> 남성<br>
       <input type="radio" name="sex" value="여성"> 여성<br>
       <input type="radio" name="sex" value="유니섹스"> 유니섹스
   </p>
   <p>
   <input type="checkbox" name="상의" value="상의"> 상의<br>
   <input type="checkbox" name="하의" value="하의"> 하의<br>
   <input type="checkbox" name="아우터" value="아우터"> 아우터
   </p>
   <div>
       <p>로그인 및 회원가입</p>
       이메일:<input type="email" name="email">
       패스워드:<input type="password" name="pw">
   </div>
</body>
</html>
  • label 태그
    input태그와 함꼐 쓰이는 태그로 입력 양식의 역할 무엇인지 알려주는 이름표 역할을 한다.
    label로 연결 되어있는 글자를 클릭하면 입력 칸이 활성화 된다.
    <form action="">
       <p>로그인 및 회원가입</p>
       <div>
           <label for="id">이메일:</label>
           <input type="email" name="email" id="id">
       </div>
       <div>
           <label for="pw">패스워드:</label>
           <input type="password" name="pw" id="pw">
       </div>
   </form>
  • select태그
    선택박스를 배치할 수 있는 태그로 <select>는 name이라는 속성을 <option>는 value 라는 속성을 반드시 가져야한다. 
    <div>
       <label for="orderstore">주문처</label>
       <select name="orderstore" id="orderstore">
           <option value="seoul">서울</option>
           <option value="busan">부산</option>
           <option value="daujeon">대전</option>
       </select>
   </div>
   <div>
       <label for="inquery">문의유형</label>
       <select name="inquery" id="inquery">
           <option value="delivery">배송</option>
           <option value="refund">환불</option>
           <option value="exchange">교환</option>
       </select>
   </div>
  • textarea 태그
    input type="text" 만 설정하면 문장을 길게 작성 시 줄바꿈없이 계속 한 줄로 이어질 수 있지만 textarea로 조정이 가능하다.
    rows,cols속성을 사용하여 줄 수, 글자 수 를 조절할 수 있다.
    ※빈 요소가 아니기 때문에 요소 안에 내용을 작성하면 value 속성과 마찬가지로 사라지지않는 값으로 처리된다.
    <div>
       <label for="content">내용</label>
       <textarea name="comment" id="comment" cols="20" rows="10"></textarea><br>
       <input type="file" name="myfile" id="">
   </div>
  • button태그
    HTML요소를 <button>태그 내부에 담아 사용할 수 있다.
    <button type="submit">제출</button>
    ※<input type="reset" name="" id=""> 를 사용하여 입력 양식을 모두 초기화 할 수 있다. 다만 form 태그로 모든 게 감싸져 있어야한다.
스프링 mvc 요청 전달 및 방향 변경
iOS 프레임별 애니메이션loading 보기 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage