CSS · HTML
HTML form 요소
혜원21
2019. 10. 17. 03:16
*
<!DOCTYPE html>
<html>
<head>
<title>문서 타이틀</title>
</head>
<body>
<div style="border: 1px solid #000; padding: 15px;">
<!--select + option-->
<!--size는 메뉴를 2칸 보여준다는 말-->
<!--multiple은 하나 이상을 선택 할 수 있다는 말-->
<select name="qkscks" size="2" multiple>
<option value="zhdwkqks">콩자반</option>
<option value="enqndyfl">두부</option>
<option value="ckacl">참치</option>
<option value="dicockacl">야채참치</option>
<option value="rla" selected>김</option>
</select>
<p></p>
<p></p>
<!--textarea는 입력 필드 rows/col 칸수-->
<textarea name="message" rows="5" cols="10">
기타 의견을 남겨줘라.응? 제발~!!!
</textarea>
<p></p>
<p></p>
<!--입력 필드를 스타일로 지정 할 수 있다-->
<textarea name="message" style="width: 200px; height: 200px;">
기타 의견을 남겨줘라.응? 제발~!!!
</textarea>
<p></p>
<p></p>
<!--버튼을 눌렀을때 메시지 확인-->
<button style="background-color: tomato;" type="button" onclick="alert('힝~ 속았지+_+)/')">눌러보세요</button>
<p></p>
<p></p>
<!--html5에 새롭게 추가된 datalist -->
<form accept="action.php">
<input list="select">
<datalist id="select">
<option value="선택1">
<option value="선택2">
<option value="선택3">
<option value="선택4">
</datalist>
<input type="submit">
</form>
</div>
</body>
</html>양식 요소에서 제일 중요한 요소는 <input>이다. 그러하단다.
기본 <input name="이름" type="text">
<select> + <option> : 드롭 다운 메뉴 선택 태그
selected : 기본으로 선택된 메뉴 정의
size : 드롭 다운 메뉴가 보이는 칸 수
multiple : 중복 선택 가능
<textarea> : 입력 가능한 필드
rows / cols : 필드의 크기 - 필드의 크기는 스타일 태그로 지정할 수 있다.
<datalist> : html5에 새롭게 추가된 요소.