전체...
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>개인정보:</legend>
<label for="first_name">이름:</label><input type="text" name="first_name" id="first_name"><br/>
<label for="last_name">성:</label><input type="text" name="last_name" id="last_name"><br/>
</fieldset>
<br/>
<fieldset>
<legend>취미:</legend>
<label for="sport">스포츠</label><input type="checkbox" value="sport" name="hobby" id="sport"/>
<label for="gaming">게임</label><input type="checkbox" value="gaming" name="hobby" id="gaming"/>
<label for="art">영화/음악감상</label><input type="checkbox" value="art" name="hobby" id="art"/>
<label for="acting">연극</label><input type="checkbox" value="acting" name="hobby" id="acting"/>
</fieldset>
<br/>
<input type="submit" value="submit">
</form>
</body>
</html>
1.text and password fields
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
username: <input type="text" name="username" maxlength="10" size="10" />
password: <input type="password" name="password" maxlength="10" size="10" />
</form>
</body>
</html>
2.select lists
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
음식 선택:
<select name="food" multiple size="3">
<optgroup label="버거">
<option value="big_mac">Big Mac</option>
<option value="shrimp_burger">새우버거</option>
<option value="cheeze_burger" selected="selected">치즈버거</option>
</optgroup>
<optgroup label="음료">
<option value="americano">아메리카노</option>
<option value="coke">콜라</option>
</optgroup>
</select>
</form>
</body>
</html>
///
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
여가시간에 하시는 일? <br/>
스포츠활동<input type="checkbox" name="spare_time[]" value="sport" />
컴퓨터 게임<input type="checkbox" name="spare_time[]" value="games" />
쇼핑<input type="checkbox" name="spare_time[]" value="shopping" />
</form>
</body>
</html>
////
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
하실 말씀 있으신가요?<br/>
<textarea name="story" rows="15" cols="60"></textarea>
</form>
</body>
</html>
///////
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
name:<input type="text" name="name"/><br/>
password:<input type="password" name="password"/><br/>
Checkboxes:<br/>
1<input type="checkbox" value="1" name="checker"/>
2<input type="checkbox" value="2" name="checker"/>
3<input type="checkbox" value="3" name="checker"/>
<input type="button" value="버튼"/><br/>
<input type="file"/> <br/>
<input type="submit" value="송신"/>
<input type="reset" value="reset"/>
</form>
</body>
</html>
///////////////////////////////////////
기본 정보
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
개인정보:<br/>
이름:<input type="text" name="first_name"><br/>
성:<input type="text" name="last_name"><br/>
<br/>
취미:<br/>
스포츠<input type="checkbox" value="sport"/>
게임<input type="checkbox" value="gaming"/>
영화/음악감상<input type="checkbox" value="art"/>
연극<input type="checkbox" value="acting"/>
<br/>
<input type="submit" value="submit">
</form>
</body>
</html>
/////////////////////////
fieldset 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>개인정보:</legend>
이름:<input type="text" name="first_name"><br/>
성:<input type="text" name="last_name"><br/>
</fieldset>
<br/>
<fieldset>
<legend>취미:</legend>
스포츠<input type="checkbox" value="sport"/>
게임<input type="checkbox" value="gaming"/>
영화/음악감상<input type="checkbox" value="art"/>
연극<input type="checkbox" value="acting"/>
</fieldset>
<br/>
<input type="submit" value="submit">
</form>
</body>
</html>
///////////////////////////////////////////////////////////////////////////////////
레이블 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>개인정보:</legend>
<label for="first_name">이름:</label><input type="text" name="first_name" id="first_name"><br/>
<label for="last_name">성:</label><input type="text" name="last_name" id="last_name"><br/>
</fieldset>
<br/>
<fieldset>
<legend>취미:</legend>
<label for="sport">스포츠</label><input type="checkbox" value="sport" name="hobby" id="sport"/>
<label for="gaming">게임</label><input type="checkbox" value="gaming" name="hobby" id="gaming"/>
<label for="art">영화/음악감상</label><input type="checkbox" value="art" name="hobby" id="art"/>
<label for="acting">연극</label><input type="checkbox" value="acting" name="hobby" id="acting"/>
</fieldset>
<br/>
<input type="submit" value="submit">
</form>
</body>
</html>
'html5' 카테고리의 다른 글
| vue.js 시작 (0) | 2018.10.21 |
|---|---|
| popup (0) | 2016.11.09 |
| 완성! (0) | 2014.09.16 |
| 프로그래스바 실시간으로 변경하기... (0) | 2014.09.16 |
| video player play 기능 추가 (0) | 2014.09.16 |