<html>
<head>
<title> label for와 id의 잼나는 놀이 </title>
<script language="javascript">
<!--
function chkPrint(){
//test_test
var frm = document.form;
//alert(frm.firstName.value);
var radioLength = frm.elements["age"].length;
alert(radioLength);
}
-->
</script>
<style TYPE="text/css">
<!--
body {font-size:9pt}
-->
</style>
</head>
<body>
<form name="form">
<!--------------- label에 for를 써서 고유한 아이디(id) 값을 맵핑하면 클릭이 가능함 ----------------->
<label for="txt01">First Name : </label><br>
<input type="text" name="firstName" id="txt01" title="Enter your first name" value="">
<p>
Age : <br>
<input type="radio" name="age" value="10" id="age10"><label for="age10"> 10대</label><br>
<input type="radio" name="age" value="20" id="age20"><label for="age20"> 20대</label><br>
<input type="radio" name="age" value="30" id="age30"><label for="age30"> 30대</label>
<p>
What colors do you like : <br>
<input type="checkbox" name="color01" value="red" id="color01_01"><label for="color01_01"> red</label><br>
<input type="checkbox" name="color02" value="yellow" id="color02_02"><label for="color02_02"> yellow</label><br>
<input type="checkbox" name="color03" value="blue" id="color03_03"><label for="color03_03"> blue</label><br>
<input type="checkbox" name="color04" value="white" id="color04_04"><label for="color04_04"> white</label>
<p>
<label for="address">Address : </label><br>
<textarea name="address" value="" rows="3" cols="20" id="address" title="Enter your address"></textarea>
<p>
<label for="notebook_01">Favorite Notebook : </label><br>
<select name="notebook" id="notebook_01">
<option value="">-SELECT-</option>
<option value="ibm">IBM</option>
<option value="samsung">Samsung</option>
<option value="lg">LG</option>
<option value="asus">ASUS</option>
</select>
<p>
<fieldset style="width:150;">
<legend>Radio Buttons</legend>
<input type="radio" name="aaa" value="11" id="aaa_01"><label for="aaa_01">11</label>
<input type="radio" name="aaa" value="22" id="aaa_02"><label for="aaa_02">22</label>
<input type="radio" name="aaa" value="33" id="aaa_03"><label for="aaa_03">33</label>
</fieldset>
<p>
<label for="favoritefood">select group</label><br>
<select name="food" id="favoritefood">
<optgroup label="Dairy products">
<option value="cheese">Cheese</option>
<option value="egg">Egg</option>
</optgroup>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="grape">Grape</option>
<option value="pineapple">Pineapple</option>
</optgroup>
</select>
<p>
<input type="button" value="전송" onClick="chkPrint();">
</form>
</body>
</html>
'프로그램 > Html & Js & Css' 카테고리의 다른 글
| [사이트] 유용한 JavaScript / jQuery 모음 (0) | 2013.01.21 |
|---|---|
| [Js] 일정시간마다 특정 함수를 실행시키는 방법 (0) | 2012.09.28 |
| word-break:break-all / word-wrap:break-word (강제줄바꿈) (0) | 2009.06.16 |
| 다국어를 위한 문자셋(charset)과 코드페이지(codepage) (0) | 2009.06.02 |
| [펌] - DIV와 SPAN의 차이점 (0) | 2009.04.28 |