카테고리 없음
Form(폼)의 활용법 textField, button, textArea, checkbox 등 등
Meteora_
2021. 2. 24. 15:58
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
form
resource(자원)
textfield, button, textArea, checkbox, radio button
-->
<!--
<태그명 속성명 = "특성명:값" 속성명="값"
style
Attribute(속성) : 표현, 접근(데이터Input Output)하기 위한 목적
<태그명 id=, class=, name=
id : 현재 페이지에서 한개만 유효, 데이터용 = javascript
class : 다중으로 사용이 가능, 디자인(CSS)
name : 값을 전달하는 목적.
-->
<p id="aaa" class="ddd" name="a1">hello</p>
<p id="bbb" class="ddd" name="b1">world</p>
<br>
<a href="NewFile.html">New.File.html로 이동</a>
<br>
<form action="NewFile.html">
New.File.html로 이동
<input type="submit" value="이동">
</form>
<br><br><br>
<!-- textfield -->
<form>
ID:<input type="text" value="" title="여기에 id 기입" size="10" placeholder="id기입">
<br><br>
PW:<input type="password" size="10">
<br><br>
초기화:<input type="reset" value="초기화"> <!-- 초기화가 먹히려면 form으로 같은 영향권으로 만들어줘야함 -->
</form>
<br><br>
<!-- html5 type -->
number:<input type="number" max="5" min="1">
<br>
date:<input type="date">
<br>
color:<input type="color" value="#ff0000">
<br>
range:<input type="range" max="10" min="0">
<br>
search:<input type="search">
<br><br><br>
<!-- checkbox & radio button -->
<input type="checkbox" value="패션" >패션 <br>
<input type="checkbox" value="음악">음악 <br>
<input type="checkbox" value="게임">게임 <br>
"WebContent/index5.html"
<input type="radio" name="car" value="벤츠" checked >벤츠<br> <!-- 동일한 네임으로 묶어야(그룹)한다. 안사라지고 안묶으면 중복 선택됌 -->
<input type="radio" name="car" value="아우디">아우디<br>
<input type="radio" name="car" value="BMW">BMW<br>
<br><br>
<textarea rows="10" cols="30">기본값</textarea>
<br><br>
<!-- select -->
<select>
<option value="과일을 선택해주세요">과일을 선택해주세요</option>
<option value="사과">Apple</option>
<option value="배">pear</option>
<option value="바나나">Banana</option>
<option value="포도">Grape</option>
</select>
<!-- 여러개 선택 ctrl 키-->
<select multiple="multiple">
<option value="과일을 선택해주세요">과일을 선택해주세요</option>
<option value="사과">Apple</option>
<option value="배">pear</option>
<option value="바나나">Banana</option>
<option value="포도">Grape</option>
</select>
</body>
</html>
결과창 ->
