form 요소

HTML 양식은 검색, 로그인, 회원가입 등에서 사용자 입력을 수집하는 데 사용하며, 

사용자 입력은 처리를 위해 서버로 전송된다.

 

※ form, fieldset 요소

태그명	설명	인라인 | 블록
form	입력값을 처리하는 프로그램으로 전송할 때 사용하는 태그	블록
	action 속성을 갖는다. 서버에 전달할 값을 처리하는 프로그램 주소를 지정한다.
	method 속성을 갖는다.  어떤 방식으로 전달할지를 정의하며, get방식 : 검색 등 비보안 데이터를 위해 사용(method="get") post방식 : 중요정보 보안 데이터를 위해 사용(method="post")
fieldset > legend	입력양식을 그룹화 할 때 사용하는 태그, 자식요소로 legend를  포함한다.	블록

팁 : 양식 데이터에 민감한 정보가 포함 된 경우 항상 POST를 사용할것~!

---

 

※ input요소

기본 입력필드의 너비는 20자 이다. 

태그명	설명	인라인 | 블록
input	type속성값에 따라 다양한 폼을 생성한다.	인라인
	데이터 값을 입력받는 태그
	name, value속성이 있다

---

 

※ input요소의 type 속성

type 속성값	설명
text	한 줄 텍스트 입력 필드 maxlength 속성으로 최대글자수 제한
password	비밀번호 입력 필드 * 로 표시됨
search	검색 입력
email	이메일 입력
tel	전화번호 입력
color	컬러 입력
number	숫자 입력 min, max로 최소, 최대값을 지정
range	슬라이드바 min, max로 최소, 최대값을 지정
radio	라디오버튼 한개만 선택가능 checked를 속성으로 지정하면, 기본 체크된 상태로 보임 type="radio"가 적용된 input끼리는 name의 속성값이 같아야 함
checkbox	체크박스 다중선택 가능(0개 이상 선택) checked를 속성으로 지정하면, 기본 체크된 상태로 보임
submit	양식을 제출하기 위한 전송버튼 value속성으로 버튼에 텍스트를 넣음
reset	초기화버튼 value속성으로 버튼에 텍스트를 넣음
button	클릭 가능한 일반적인 버튼 value속성으로 버튼에 텍스트를 넣음
image	이미지버튼 alt 속성을 반드시 정의
file	첨부파일
hidden	사용자에게 보이지 않는 데이터 지정
datetime-local	날자와 시간을 선택
month	연도와 월을 선택
week	연도와 주를 선택
date	날자를 선택
time	시간을 선택

 

---

 

※ label요소

- 폼 요소에 대한 레이블을 정의하며, 화면판독기 사용자에게 유용하다. 

-  label요소 for 속성은 input요소의 id속성과 같아야 바인딩 되었음을 확인할 수 있다. (아래 코드 참조)

- name 속성은 전송을 위해 필요한 속성이다. 

---

<form>
  <label for="firstname">First name:</label><br>
  <input type="text" id="firstname" name="firstname"><br>
  <label for="lastname">Last name:</label><br>
  <input type="text" id="lastname" name="lastname">
</form>

 

 

---

※ textarea 요소

- 여러줄의 텍스트를 입력받는 상자를 정의한다. 

태그명	설명	인라인 | 블록
textarea	여러 줄의 텍스트 입력상자 태그	인라인
	rows, cols 속성으로 텍스트 입력상자의 행과 열수를 지정
	css로 텍스트 영역의 크기를 지정해도 된다.

 

---

<textarea name="msg" rows="10" cols="20" >
텍스트 영역을 지정하는 상자입니다.<br>
 rows, cols로 행과 열의 크기를 지정합니다.
</textarea>

<textarea name="msg"style="width:300px; height:150px;">
텍스트 영역을 지정하는 상자입니다. <br>
css로 크기를 지정하기도 합니다. 
</textarea>

 

---

※ select 요소

- 아래로 내려가는 목록을 정의한다. 

태그명	설명	인라인 | 블록
select > option	선택할 수 있는 태그를 생성한다.  자식요소로 option 태그를 작성하며 선택옵션을 정의한다.(필수)	인라인
	selected 속성을 추가하면 미리 선택된 옵션으로 정의할 수 있다.
	size 속성은 표시할 값의 수를 지정한다. (size="3")
	multiple 속성은 사용자가 둘 이상의 값을 선택할 수 있다.
	value속성이 있다

---

<form>
  <label for="items">Choose a list item</label>
  
  <select id="items" name="items" size="3" multiple>
    <option value="item1">item 1</option>
    <option value="item2">item 2</option>
    <option value="item3">item 3</option>
    <option value="item4">item 4</option>
  </select>
  
  <br><br>
  <input type="submit">
</form>

 

---

 

※ select의 option은 관련 항목별로 optgroup으로 묶을 수 있다.

<form>
  <label for="items">Choose a items</label>
  
  <select name="items" id="items">
    <optgroup label="items12">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
    </optgroup>
    <optgroup label="items34">
      <option value="item3">item3</option>
      <option value="item4">item4</option>
    </optgroup>
  </select>
  
  <br><br>
  <input type="submit" value="Submit">
</form>
 

 

 

---

※ 주요 속성

- 아래로 내려가는 목록을 정의한다. 

속성	설명
placeholder	입력내용에 대한 힌트를 제공한다.
required	필수로 넣어야 하는 경우 작성하는 속성, 비워두면 경고메시지가 표시됨
autocomplete	입력요소에 자동완성기능여부를 on/off로 설정하는 속성
pattern	지정한 문자패턴과 입력내용의 일치여부 판단
multiple	여러개의 이메일을 ','로 입력하거나 파일 업로드 시 여러 개의 파일을 동시네 선택할 수 있도록 해주는 속성
disabled	요소를 사용할 수 없게 비활성화 시킴
readonly	입력된 내용을 수정할 수 없게 만드는 속성

<form action="#">			
	<table border="1" width="600">	
            <tr>
              <th><label for="id">아이디</label></th>
              <td>
              	<input type="text" id="id" title="아이디입력" 
                   placeholder="아이디" required="required">
              </td>
            </tr>
            <tr>
              <th><label for="pw1">비밀번호</label></th>
              <td>
              	<input type="password" id="pw1" title="비밀번호 입력" 
                   placeholder="비밀번호"  required="required">
               </td>
            </tr>
            <tr>
              <th><label for="pw2">비밀번호 재입력</label></th>
              <td>
                  <input type="password" id="pw2" title="비밀번호 재입력" 
                   placeholder="비밀번호확인">
              </td>
            </tr>
            <tr>
              <th><label for="email">이메일</label></th>
              <td>
                  <input type="text" id="email" title="이메일아이디 입력" 
                   autocomplete="off">
                  @<input type="text" title="이메일주소 입력">
              </td>
            </tr>
            <tr>
              <th><label for="hp">핸드폰 번호</label></th>
              <td>
                <select id="hp" title="휴대폰 앞자리 선택">
                <option>선택</option>
                <option>010</option>
                <option>011</option>
                </select>-
                <input type="text" title="휴대폰 번호 중간 4자리 입력">-
                <input type="text" title="휴대폰 번호 끝 4자리 입력">
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <input type="submit" value="회원가입"> 
                <input type="reset" value="취소">
              </td>
            </tr>				
		</table>
	</form>