티스토리 뷰
ex3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>button<h3>
<input type = "button" value="clik" onclick="alert('clear')">
<hr>
<h3>checkbox<h3>
<input type = "checkbox" name="dog1" value="maltese" checked>말티즈<br>
<input type = "checkbox" name="dog2" value="poodle">푸들<br>
<input type = "checkbox" name="dog3" value="retriever">리트리버<br>
<hr>
<h3>radio<h3>
<input type="radio" name="yes" value="yes">예<br>
<input type="radio" name="no" value="no">아니오<br>
<hr>
<h3>reset</h3>
<input type="reset">
<hr>
<h3>search</h3>
<input type="search" name="search">
<hr>
<h3>time</h3>
<input type="time" name="time">
<hr>
<h3>url</h3>
<input type="url" name="url">
<hr>
<h3>week</h3>
<input type="week" name="week">
<h3>datetime</h3>
<input type="datetime" name="daytime">
<hr>
<h3>datetime-local</h3>
<input type="datetime-local" name="datetime-local">
<hr>
<h3>email</h3>
<input type="email" name="email">
<hr>
<h3>file</h3>
<input type="file" name="file">
<hr>
<h3>hidden</h3>
<input type="hidden" name="hidden" value="hidden">
hidden filed는 사용자에 표시되지 않는다.
<hr>
<h3>image</h3>
<input type="image" src="star.jpg" alt="Submit" width="50" height="50">
<hr>
</body>
</html>
정리
check,radio
value 서버에 전달될 값
checked 기본으로 선택하고 싶은 항목
name radio 전용,여러 옵션의 공통이름
number,range
min 최소값(기본값 0) , max 최대값(기본값 100)
strep 조정할 단위값(기본값 1)
value 초기값
submit,reset
value 버튼에 표시할 내용
image
src 이미지 경로
alt 대체 텍스트
button
value 버튼에 표시할 내용
onclick 클릭시 실행할 js함수
input 이외 태그
textarea 여러 줄의 텍스트 입력 영역
rows
cols
드롭다운 목록생성 select
size 항목 개수
multiple 둘 이상의 항목을 선택
option value 서버에 전달될 값
selected 기본 선택 항목
미리 입력된 데이터 목록 datalist
option value
버튼 button
type="submit" 폼을 서버로 전송
"reset" 폼 초기화
"button" 일반버튼,<input type="button">과 같다.
'독학 > html' 카테고리의 다른 글
| 독학 -html5 (0) | 2022.09.02 |
|---|---|
| html독학3 태그 공부 (0) | 2022.08.22 |
| html 독학1 (0) | 2022.08.17 |