본문 바로가기
웹코딩 배우기/· HTML

HTML form 요소

by 닐기 2019. 10. 17.

<!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에 새롭게 추가된 요소.