html 기본 개념 정리_3

form tag

<form> 요소는 정보를 제출하기 위하여 어디서부터 어디까지가 양식인지 지정하는 역할을 한다.

<form action="/signup" method="post">
  <div class="form-example">
    <label for="name">이름: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">이메일: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="제출하기">
  </div>
</form>

input tag

<input> 요소로 데이터를 입력 받을 수 있다. type 속성을 통하여 다양한 방법으로 데이터를 받을 수 있다.

text

input 태그의 기본값으로 한줄의 텍스트를 입력 받는다.

<input type="text" id="name">

• text - 일반적인 텍스트를 받기위해 사용
• password - 비밀번호를 받기위해 사용
• email - email 데이터를 받기위해 사용 (이메일 유효성 검증)
• tel - 전화번호를 받기위해 사용 (모바일 접근시 키패드가 다름)
  
  

checkbox

여러개의 체크박스 항목 중 2개 이상 선택할 수 있음. 그리고 체크박스 선택시 선택된 체크박스의 value 값이 서버로 전송된다.

<ul>
  <li>
    <label for="apple">사과</label>
    <input id="apple" type="checkbox" value="apple">
  </li>
  <li>
    <label for="orange">오렌지</label>
    <input id="orange" type="checkbox" value="orange">
  </li>
  <li>
    <label for="banana">바나나</label>
    <input id="banana" type="checkbox" value="banana">
  </li>
</ul>

radio

여러개의 라디오 항목 중 1개를 선택할 수 있다. 그리고 라디오 항목 선택시 선택된 항목의 value 값이 서버로 전송된다.
여러개 중 하나를 선택하게 하려면 그 여러 항목의 <radio name=""> name 속성 값을 같은 값으로 그룹핑 해줘야 함.

<ul>
  <li>
    <label for="strawberry">딸기</label>
    <input id="strawberry" name="fruit" type="radio" value="strawberry">
  </li>
  <li>
    <label for="grape">포도</label>
    <input id="grape" name="fruit" type="radio" value="grape">
  </li>
  <li>
    <label for="peach">복숭아</label>
    <input id="peach" name="fruit" type="radio" value="peach">
  </li>
</ul>

이 외에 number, range, 날짜/시간, hidden, button 등이 있으나 외울 필요는 없고 쓰면서 익히고 구글링하는 식으로 사용하면 된다.

Form 데이터 태그 속성

• required 입력값이 필수라는 것을 명시할 수 있다.
  
• readonly 필드를 읽기전용으로 필드로 만들 수 있다.
  
• disabled 비활성화 시킬 수 있으며 해당 필드는 서버로 전송되지 않는다.
  
• autofocus 초기에 해당 필드에 커서를 위치 시킬 수 있다.
  
• placeholder 입력 필드가 비어있을 때 해당 입력값의 설명 또는 가이드 문구를 삽입할 수 있다.
  

fieldset

양식의 여러 컨트롤과 레이블()을 묶을 때 사용한다.

legend

요소는 부모 <fieldset> 콘텐츠의 설명을 나타낸다.