form태그

웹에서 사용자로부터 입력받는 정보 양식들을 정의할 때 사용한다.

-form의 요소

• button
• fieldset
• input
• label
• option
• optgroup
• select
• textarea

Input(1)

<form>
    <input type="text" value="아이디" namer="text">
</form>

해당 태그를 입력하면 하단의 기본 텍스트 입력칸이 출력된다.

Input 태그의 기본 속성

• type = 입력태그의 유형
  (양식: eckbox,radio,button,reset,submit,image,search...)
• value = 입력태그의 초기값
• name = 서버로 전달되는 이름

Input(2)

<input type="text" size="50" id="u_id" required 
autofocus placeholder="아이디를 입력하세요." width>

• required = 필수 입력 요소
• autofocus = 자동 포커스
• placeholder = 입력에 대한 짧은 도움말

select

<select>
    <option selected>일러스트</option>
    <option>포토샵</option>
    <option>html5</option>
    <option>jsp</option>
</select>

일러스트 포토샵 html5 jsp

select태그와 option태그로 구성된다.

• 기본 값 = selected

fieldset

<fieldset>
        <legend>색상 및 숫자 입력 예제</legend>
        <p>표지색상:<input type="color"></p>
        <p>제작권수:<input type="number" min=-100 max="100" step="10" value="20"></p>
        <p>표지두께:0.1mm<input type="range" min="1" max="5" value="3"></p>
        <p>download <progress value="65" max="100"></progress></p>
</fieldset>

색상 및 숫자 입력 예제

표지색상:

제작권수:

표지두께:0.1mm

download

fieldset 태그는 관련된 form요소들을 하나로 묶을 때 사용한다.

• legend = fieldset의 caption 정의

table

<table width="500" border="1">
        <tr>
            <td>date<input type="date"></td>
            <td>month<input type="month"></td>
            <td>week<input type="week"></td>
        </tr>
</table>

date

month

week

label

<label>면접일자:<input type="time" min="09:00" max="24:00" step="1800"</label>

면접일자: