attribute | value | description |
---|---|---|
action | URL | 입력 데이터(form data)가 전송될 URL 지정 |
method | get/post | 입력 데이터(form data) 전달 방식 지정 |
HTTP (Hyper Text Transfer Protocol)
<!DOCTYPE html>
<html>
<body>
<form action="jsonplaceholder.typicode.com/users" method="get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value="Sora"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
-submit button 클릭 -> input tag에 입력된 데이터가 form tag의 method attribute가 지정한 방식으로
action attribute에 지정된 서버측의 처리 로직에 전달됨
Type attribute | Description | HTML5 추가 | IE | FF | CR | SF | OP |
---|---|---|---|---|---|---|---|
button | 버튼 생성 | O | O | O | O | O | |
checkbox | checkbox 생성 | O | O | O | O | O | |
color | 컬러 선택 생성 | O | X | O | O | X | O |
date | date control(년월일) 생성 | O | X | X | O | O | O |
datetime | date & time control(년월일시분초) 생성 | O | X | X | X | X | X |
datetime-local | 지역 date & time control(년월일시분초) 생성 | O | X | X | O | O | O |
이메일 입력 form 생성, submit시 자동검증 | O | O | O | O | X | O | |
file | 파일 선택 form 생성 | O | O | O | O | O | |
hidden | 감추어진 입력 form 생성 | O | O | O | O | O | |
image | 이미지로 된 submit button 생성 | O | O | O | O | O | |
month | 월 선택 form 생성 | O | X | X | O | O | O |
number | 숫자 입력 form 생성 | O | O | O | O | O | O |
password | password 입력 form 생성 | O | O | O | O | O | |
radio | radio button 생성 | O | O | O | O | O | |
range | 범위 선택 form 생성 | O | O | O | O | O | O |
reset | 초기화 button 생성 | O | O | O | O | O | |
search | 검색어 입력 form 생성 | O | X | X | O | O | X |
submit | 제출 button 생성 | O | O | O | O | O | |
tel | 전화번호 입력 form 생성 | O | X | X | X | X | X |
text | 텍스트 입력 form 생성 | O | O | O | O | O | |
time | 시간 선택 form 생성 | O | X | X | O | O | O |
url | url 입력 form 생성 | O | O | O | O | X | O |
week | 주 선택 입력 form 생성 | O | X | X | O | O | O |
<!DOCTYPE html>
<html>
<body>
<h3>button</h3>
<input type="button" value="Click me" onclick="alert('Hello World')">
<hr>
<h3>checkbox</h3>
<input type="checkbox" value="fruit1" value="apple" checked> 사과<br>
<input type="checkbox" value="fruit2" value="grape"> 표도<br>
<input type="checkbox" value="fruit3" value="peach"> 복숭아<br>
<hr>
<h3>color</h3>
<input type="color" name="mycolor">
<hr>
<h3>date</h3>
<input type="date" name="birthday">
<hr>
<h3>datetime</h3>
<input type="datetime" name="birthdaytime">
<hr>
<h3>datetime-local</h3>
<input type="datetime-local" name="birthdaytime">
<hr>
<h3>email</h3>
<input type="email" name="useremail">
<hr>
<h3>file</h3>
<input type="file" name="myfile">
<hr>
<h3>hidden</h3>
<input type="hidden" name="country" value="Korea">
Hidden filed는 사용자에게는 보이지 않는다.
<hr>
<h3>image</h3>
<input type="image" src="image/image_submit.gif" alt="Submit" width="48" height="48">
<hr>
<h3>month</h3>
<input type="month" name="birthdaymonth">
<hr>
<h3>number</h3>
<input type="number" name="quantity" min="2" max="10" step="2" value="2">
<hr>
<h3>password</h3>
<input type="password" name="pwd">
<hr>
<h3>radio</h3>
<input type="radio" name="gender" value="male" checked> 남자<br>
<input type="radio" name="gender" value="female"> 여자<br>
<hr>
<h3>range</h3>
<input type="range" name="points" min="0" max="10" step="1" value="5">
<hr>
<h3>reset</h3>
<input type="reset">
<hr>
<h3>search</h3>
<input type="search" name="goolgesearch">
<hr>
<h3>submit</h3>
<input type="submit" value="Submit">
<hr>
<h3>tel</h3>
<input type="tel" name="mytel">
<hr>
<h3>text</h3>
<input type="text" name="mytext">
<hr>
<h3>time</h3>
<input type="time" name="mytime">
<hr>
<h3>url</h3>
<input type="url" name="myurl">
<hr>
<h3>week</h3>
<input type="week" name="week_year">
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<select name="car1">
<option value="volvo" selected>Volvo</option>
<option value="saab" disabled>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="car2" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>
<select name="cars3">
<optgroup label="Swedish Cars">
<option value="Volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10" cols="30">Write something here</textarea>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World')">Click me!</button>
<input type="button" value="Click me!" onclick="alert('Hello World')">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
</fieldset>
</body>
</html>