입력, 선택, 업로드, 확인 등을 구현하는 것은 HTML을 배우는 마지막 단계입니다.
텍스트 상자(Text boxes) : 텍스트 및 암호 유형 input 요소.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text and password inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Text and Password</legend>
<label for="username">Username:</label>
<input name="username" id="username" value="Some Text">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="Password">
</fieldset>
</form>
</body>
</html>확인란(Checkboxes) 및 라디오 버튼(Radio buttons) : input 요소 유형이 많습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox and radio inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
label {
float: left;
width: 6em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Films you like</legend>
<div>
<label for="drama">Drama</label>
<input type="checkbox" name="drama" id="drama" value="drama">
</div>
<div>
<label for="action">Action</label>
<input type="checkbox" name="action" id="action" value="action">
</div>
<div>
<label for="comedy">Comedy</label>
<input type="checkbox" name="comedy" id="comedy" value="comedy">
</div>
<div>
<label for="horror">Horror</label>
<input type="checkbox" name="horror" id="horror" value="horror">
</div>
<div>
<label for="scifi">Sci-fi</label>
<input type="checkbox" name="scifi" id="scifi" value="scifi">
</div>
</fieldset>
<fieldset>
<legend>Your age</legend>
<div>
<label for="lt20">19 or under</label>
<input type="radio" name="age" id="lt20" value="lt20">
</div>
<div>
<label for="20to39">20 to 39</label>
<input type="radio" name="age" id="20to39" value="20to39">
</div>
<div>
<label for="40to59">40 to 59</label>
<input type="radio" name="age" id="40to59" value="40to59">
</div>
<div>
<label for="gt59">60 or over</label>
<input type="radio" name="age" id="gt59" value="gt59">
</div>
</fieldset>
</form>
</body>
</html>파일 입력(File input) : 업로드 용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Upload file</legend>
<label for="uploadfile">File name: </label>
<input type="file" name="uploadfile" id="uploadfile">
</fieldset>
</form>
</body>
</html>텍스트 영역(Text areas) : textarea 요소입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text areas</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
label {
float: left;
clear: left;
width: 7em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Contact us</legend>
<div>
<label for="name">Name: </label>
<input name="name" id="name">
</div>
<div>
<label for="email">Email address: </label>
<input name="email" id="email">
</div>
<div>
<label for="message">Message: </label>
<textarea rows="10" cols="40" name="message" id="message"></textarea>
</div>
</fieldset>
</form>
</body>
</html>선택 상자(Select boxes) : select 및 option 요소의 기본 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select menus</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Favourite book</legend>
<label for="book">Name: </label>
<select name="book" id="book">
<option>The Trial</option>
<option>The Outsider</option>
<option>Things Fall Apart</option>
<option>Animal Farm</option>
</select>
</fieldset>
</form>
</body>
</html>선택 상자 옵션 그룹 : optgroup 요소 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select menus: option groups</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Favourite book</legend>
<label for="book">Name: </label>
<select name="book" id="book">
<optgroup label="Camus">
<option>The Outsider</option>
<option>The Rebel</option>
<option>The Plague</option>
</optgroup>
<optgroup label="Orwell">
<option>Animal Farm</option>
<option>Nineteen Eighty-Four</option>
<option>Down and Out in Paris and London</option>
</optgroup>
</select>
</fieldset>
</form>
</body>
</html>다중 선택 선택 상자 : multiple 속성 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select menus: multiple selections</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Favourite book</legend>
<label for="book">Name: </label>
<select name="book" id="book" size="5" multiple="multiple">
<option>The Outsider</option>
<option>The Rebel</option>
<option>The Plague</option>
<option>Things Fall Apart</option>
<option>Animal Farm</option>
<option>Nineteen Eighty-Four</option>
<option>Down and Out in Paris and London</option>
</select>
</fieldset>
</form>
</body>
</html>