[HTML 3-3] 🌟formβ€’πŸŒŸinput νƒœκ·Έ

μž„μŠΉν˜„Β·2022λ…„ 11μ›” 9일
0

HTML

λͺ©λ‘ 보기
8/9

🌟form νƒœκ·Έ

πŸ“Œform νƒœκ·Έ : μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•˜μ—¬ μ‚¬μš©μžλ‘œλΆ€ν„° μž…λ ₯받은 값을 μ „λ‹¬ν•˜κΈ° μœ„ν•œ νƒœκ·Έ

ex) νšŒμ›κ°€μž…, 아이디 λΉ„λ°€λ²ˆν˜Έ μž…λ ₯ν•˜κ³  둜그인 μš”μ²­
β†’ ν•˜μœ„νƒœκ·Έλ‘œ μž…λ ₯νƒœκ·Έμ™€ form νƒœκ·Έκ°€ μ‹€ν–‰ν•˜κΈ° μœ„ν•΄ 이벀트(submit Event)λ₯Ό λ°œμƒμ‹œν‚€λŠ” νƒœκ·Έλ₯Ό λ°˜λ“œμ‹œ μž‘μ„±

🌠action 속성 : form νƒœκ·Έλ‘œ μš”μ²­ν•  μ›Ήν”„λ‘œκ·Έλž¨μ˜(Servlet) URL μ£Όμ†Œλ₯Ό μ†μ„±κ°’μœΌλ‘œ μ„€μ •

🌠method 속성 : μ›Ήν”„λ‘œκ·Έλž¨μ˜ μš”μ²­λ°©μ‹(GET[κΈ°λ³Έ] λ˜λŠ” POST)을 μ†μ„±κ°’μœΌλ‘œ μ„€μ •

β†’ μ›Ήν”„λ‘œκ·Έλž¨ μš”μ²­λ°©μ‹μ— 따라 μ‚¬μš©μž μž…λ ₯값을 μ „λ‹¬ν•˜λŠ” 방식이 닀름
β—ˆ GET : μ‚¬μš©μž μž…λ ₯값을 URL μ£Όμ†Œμ˜ μ§ˆμ˜λ¬Έμžμ—΄(QueryString)둜 전달
β†’ λ³΄μ•ˆμ΄ ν•„μš” μ—†λŠ” μ†ŒλŸ‰μ˜ 값을 전달할 λ•Œ μ‚¬μš©ν•˜λŠ” μš”μ²­λ°©μ‹
β—ˆ POST : μ‚¬μš©μž μž…λ ₯값을 λ¦¬ν€˜μŠ€νŠΈ 메세지(Request Message)의 λͺΈμ²΄λΆ€(Body)에 μ €μž₯ν•˜μ—¬ 전달
β†’ λ³΄μ•ˆμ΄ ν•„μš”ν•œ κ°’ λ˜λŠ” λŒ€λŸ‰μ˜ 값을 전달할 λ•Œ μ‚¬μš©ν•˜λŠ” μš”μ²­λ°©μ‹
β—ˆ λ¦¬ν€˜μŠ€νŠΈ 메세지 : μ›Ήν”„λ‘œκ·Έλž¨ μš”μ²­μ‹œ ν΄λΌμ΄μ–ΈνŠΈμ˜ 정보λ₯Ό μ €μž₯ν•˜μ—¬ μ „λ‹¬ν•˜κΈ° μœ„ν•œ 메세지(객체)
β†’ λ¨Έλ¦ΏλΆ€(Header)와 λͺΈμ²΄λΆ€(Body)둜 κ΅¬μ„±λ˜λ©° GET λ°©μ‹μœΌλ‘œ μš”μ²­ν•  경우 λͺΈμ²΄λΆ€λŠ” 항상 λΉ„μ–΄μžˆλŠ” μƒνƒœ

🌠enctype 속성 : μ‚¬μš©μž μž…λ ₯값을 μ „λ‹¬ν•˜κΈ° μœ„ν•œ νŒŒμΌν˜•μ‹(MimeType)을 μ†μ„±κ°’μœΌλ‘œ μ„€μ •

β†’ application/x-www-form-urlencoded(κΈ°λ³Έ) : μ‚¬μš©μž μž…λ ₯값을 인코딩 처리된 문자 λ°μ΄ν„°λ‘œ
μ „λ‹¬ν•˜κΈ° μœ„ν•œ 속성값
β†’ multipart/form-data : μ‚¬μš©μž μž…λ ₯값을 μ›μ‹œ λ°μ΄ν„°λ‘œ μ „λ‹¬ν•˜κΈ° μœ„ν•œ 속성값 - νŒŒμΌμ„ 전달할 경우 μ‚¬μš©

<form action="19_action.html" method="post" enctype="application/x-www-form-urlencoded">

β—ˆ μž…λ ₯ νƒœκ·Έ : μ‚¬μš©μžλ‘œλΆ€ν„° 값을 μž…λ ₯λ°›κΈ° μœ„ν•œ νƒœκ·Έ - input, textarea, select λ“±

아이디 : <input type="text" name="id"><br>
λΉ„λ°€λ²ˆν˜Έ : <input type="password" name="passwd"><br>

β—ˆ 제좜 이벀트(Submit Event)λ₯Ό λ°œμƒμ‹œν‚€λŠ” νƒœκ·Έ - input, button λ“±
β†’ 제좜 이벀트(Submit Event)에 μ˜ν•΄ form νƒœκ·Έκ°€ λ™μž‘λ˜μ–΄ λΈŒλΌμš°μ €μ˜ μ£Όμ†Œμ°½μ΄ action
μ†μ„±κ°’μœΌλ‘œ μ„€μ •λœ URL μ£Όμ†Œλ‘œ λ³€κ²½λ˜μ–΄ μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•˜λ©° μž…λ ₯νƒœκ·Έμ— μž…λ ₯된 μž…λ ₯값을 전달
β—ˆ button νƒœκ·Έμ˜ type 속성값을 [submit]으둜 μ„€μ •ν•˜λ©΄ 버틀을 ν΄λ¦­ν•œ 경우 제좜 이벀트 λ°œμƒ

<button type="submit">둜그인</button>

πŸ“ƒ19_form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>form νƒœκ·Έ</h1>
	<hr>
	<!-- β˜…form νƒœκ·Έ : μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•˜μ—¬ μ‚¬μš©μžλ‘œλΆ€ν„° μž…λ ₯받은 값을 μ „λ‹¬ν•˜κΈ° μœ„ν•œ νƒœκ·Έ -->
	<!-- ex) νšŒμ›κ°€μž…, 아이디 λΉ„λ°€λ²ˆν˜Έ μž…λ ₯ν•˜κ³  둜그인 μš”μ²­ -->
	<!-- β†’ ν•˜μœ„νƒœκ·Έλ‘œ μž…λ ₯νƒœκ·Έμ™€ form νƒœκ·Έκ°€ μ‹€ν–‰ν•˜κΈ° μœ„ν•΄ 이벀트(submit Event)λ₯Ό λ°œμƒμ‹œν‚€λŠ” νƒœκ·Έλ₯Ό λ°˜λ“œμ‹œ μž‘μ„± -->
	<!-- action 속성 : form νƒœκ·Έλ‘œ μš”μ²­ν•  μ›Ήν”„λ‘œκ·Έλž¨μ˜(Servlet) URL μ£Όμ†Œλ₯Ό μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- method 속성 : μ›Ήν”„λ‘œκ·Έλž¨μ˜ μš”μ²­λ°©μ‹(GET[κΈ°λ³Έ] λ˜λŠ” POST)을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- β†’ μ›Ήν”„λ‘œκ·Έλž¨ μš”μ²­λ°©μ‹μ— 따라 μ‚¬μš©μž μž…λ ₯값을 μ „λ‹¬ν•˜λŠ” 방식이 닀름 -->
	<!-- GET : μ‚¬μš©μž μž…λ ₯값을 URL μ£Όμ†Œμ˜ μ§ˆμ˜λ¬Έμžμ—΄(QueryString)둜 전달 -->
	<!-- β†’ λ³΄μ•ˆμ΄ ν•„μš” μ—†λŠ” μ†ŒλŸ‰μ˜ 값을 전달할 λ•Œ μ‚¬μš©ν•˜λŠ” μš”μ²­λ°©μ‹ -->
	<!-- POST : μ‚¬μš©μž μž…λ ₯값을 λ¦¬ν€˜μŠ€νŠΈ 메세지(Request Message)의 λͺΈμ²΄λΆ€(Body)에 μ €μž₯ν•˜μ—¬ 전달 -->
	<!-- β†’ λ³΄μ•ˆμ΄ ν•„μš”ν•œ κ°’ λ˜λŠ” λŒ€λŸ‰μ˜ 값을 전달할 λ•Œ μ‚¬μš©ν•˜λŠ” μš”μ²­λ°©μ‹ -->
	<!-- λ¦¬ν€˜μŠ€νŠΈ 메세지 : μ›Ήν”„λ‘œκ·Έλž¨ μš”μ²­μ‹œ ν΄λΌμ΄μ–ΈνŠΈμ˜ 정보λ₯Ό μ €μž₯ν•˜μ—¬ μ „λ‹¬ν•˜κΈ° μœ„ν•œ 메세지(객체) -->
	<!-- β†’ λ¨Έλ¦ΏλΆ€(Header)와 λͺΈμ²΄λΆ€(Body)둜 κ΅¬μ„±λ˜λ©° GET λ°©μ‹μœΌλ‘œ μš”μ²­ν•  경우 λͺΈμ²΄λΆ€λŠ” 항상 λΉ„μ–΄μžˆλŠ” μƒνƒœ -->
	<!-- enctype 속성 : μ‚¬μš©μž μž…λ ₯값을 μ „λ‹¬ν•˜κΈ° μœ„ν•œ νŒŒμΌν˜•μ‹(MimeType)을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- β†’ application/x-www-form-urlencoded(κΈ°λ³Έ) : μ‚¬μš©μž μž…λ ₯값을 인코딩 처리된 문자 λ°μ΄ν„°λ‘œ μ „λ‹¬ν•˜κΈ° μœ„ν•œ 속성값 -->
	<!-- β†’ multipart/form-data : μ‚¬μš©μž μž…λ ₯값을 μ›μ‹œ λ°μ΄ν„°λ‘œ μ „λ‹¬ν•˜κΈ° μœ„ν•œ 속성값 - νŒŒμΌμ„ 전달할 경우 μ‚¬μš© -->
	<form action="19_action.html" method="post" enctype="application/x-www-form-urlencoded">
		<!-- μž…λ ₯ νƒœκ·Έ : μ‚¬μš©μžλ‘œλΆ€ν„° 값을 μž…λ ₯λ°›κΈ° μœ„ν•œ νƒœκ·Έ - input, textarea, select λ“± -->
		아이디 : <input type="text" name="id"><br>
		λΉ„λ°€λ²ˆν˜Έ : <input type="password" name="passwd"><br>
		<!-- 제좜 이벀트(Submit Event)λ₯Ό λ°œμƒμ‹œν‚€λŠ” νƒœκ·Έ - input, button λ“± -->
		<!-- β†’ 제좜 이벀트(Submit Event)에 μ˜ν•΄ form νƒœκ·Έκ°€ λ™μž‘λ˜μ–΄ λΈŒλΌμš°μ €μ˜ μ£Όμ†Œμ°½μ΄ action 
		μ†μ„±κ°’μœΌλ‘œ μ„€μ •λœ URL μ£Όμ†Œλ‘œ λ³€κ²½λ˜μ–΄ μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•˜λ©° μž…λ ₯νƒœκ·Έμ— μž…λ ₯된 μž…λ ₯값을 전달 -->
		<!-- button νƒœκ·Έμ˜ type 속성값을 [submit]으둜 μ„€μ •ν•˜λ©΄ 버틀을 ν΄λ¦­ν•œ 경우 제좜 이벀트 λ°œμƒ -->
		<button type="submit">둜그인</button>
	</form>
</body>
</html>

πŸ“ƒ19_action.html

β—ˆ a νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λ©΄ 클릭 이벀트λ₯Ό μ΄μš©ν•˜μ—¬ μ›Ήν”„λ‘œκ·Έλž¨(μ›Ήλ¬Έμ„œ)λ₯Ό GET λ°©μ‹μœΌλ‘œ μš”μ²­
β†’ href μ†μ„±κ°’μœΌλ‘œ μš”μ²­ν•  μ›Ήν”„λ‘œκ·Έλž¨μ˜ URL μ£Όμ†Œλ₯Ό μ„€μ •
β†’ νƒœκ·Έλ‚΄μš©(ν…μŠ€νŠΈ λ˜λŠ” 이미지)을 ν΄λ¦­ν•œ 경우 μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•˜μ—¬ 처리결과λ₯Ό 응닡받아 좜λ ₯ - νŽ˜μ΄μ§€ 이동
β†’ ν΄λΌμ΄μ–ΈνŠΈμ˜ λΈŒλΌμš°μ € μ£Όμ†Œμ°½μ˜ URL μ£Όμ†Œ λ³€κ²½
β—ˆ μš”μ²­ μ›Ήν”„λ‘œκ·Έλž¨μ— 값을 전달할 경우 직접 μ§ˆμ˜λ¬Έμžμ—΄(QueryString)을 μž‘μ„±
β†’ URL μ£Όμ†ŒλŠ” 영문자,숫자,일뢀 특수문자둜만 μž‘μ„± κ°€λŠ₯ν•˜λ―€λ‘œ 직접 μ§ˆμ˜λ¬Έμžμ—΄μ„ μž‘μ„±
ν•˜μ—¬ 값을 전달할 경우 영문자,숫자,일뢀 특수문자λ₯Ό μ œμ™Έν•œ λ¬Έμžκ°’μ€ 전달 λΆˆκ°€λŠ₯
β†’ 영문자,숫자,일뢀 특수문자λ₯Ό μ œμ™Έν•œ λ¬Έμžκ°’μ€ λΆ€ν˜Έν™” μ²˜λ¦¬ν•˜μ—¬ 전달 κ°€λŠ₯ - JavaScript μ‚¬μš©

<p><a herf="19_form.html?name=honggildong">μž…λ ₯νŽ˜μ΄μ§€ 이동</a></p>

─────────────────────────────────────

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>form νƒœκ·Έ</h1>
	<hr>
	<p>μž…λ ₯값을 전달받아 μ²˜λ¦¬ν•˜λŠ” νŽ˜μ΄μ§€ - μ›Ήν”„λ‘œκ·Έλž¨</p>
	<!-- a νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λ©΄ 클릭 이벀트λ₯Ό μ΄μš©ν•˜μ—¬ μ›Ήν”„λ‘œκ·Έλž¨(μ›Ήλ¬Έμ„œ)λ₯Ό GET λ°©μ‹μœΌλ‘œ μš”μ²­ -->
	<!-- β†’ href μ†μ„±κ°’μœΌλ‘œ μš”μ²­ν•  μ›Ήν”„λ‘œκ·Έλž¨μ˜ URL μ£Όμ†Œλ₯Ό μ„€μ • -->
	<!-- β†’ νƒœκ·Έλ‚΄μš©(ν…μŠ€νŠΈ λ˜λŠ” 이미지)을 ν΄λ¦­ν•œ 경우 μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•˜μ—¬ 처리결과λ₯Ό 응닡받아 좜λ ₯ - νŽ˜μ΄μ§€ 이동 -->
	<!-- β†’ ν΄λΌμ΄μ–ΈνŠΈμ˜ λΈŒλΌμš°μ € μ£Όμ†Œμ°½μ˜ URL μ£Όμ†Œ λ³€κ²½ -->
	<!-- μš”μ²­ μ›Ήν”„λ‘œκ·Έλž¨μ— 값을 전달할 경우 직접 μ§ˆμ˜λ¬Έμžμ—΄(QueryString)을 μž‘μ„± -->
	<!-- β†’ URL μ£Όμ†ŒλŠ” 영문자,숫자,일뢀 특수문자둜만 μž‘μ„± κ°€λŠ₯ν•˜λ―€λ‘œ 직접 μ§ˆμ˜λ¬Έμžμ—΄μ„ μž‘μ„±
	ν•˜μ—¬ 값을 전달할 경우 영문자,숫자,일뢀 특수문자λ₯Ό μ œμ™Έν•œ λ¬Έμžκ°’μ€ 전달 λΆˆκ°€λŠ₯ -->
	<!-- β†’ 영문자,숫자,일뢀 특수문자λ₯Ό μ œμ™Έν•œ λ¬Έμžκ°’μ€ λΆ€ν˜Έν™” μ²˜λ¦¬ν•˜μ—¬ 전달 κ°€λŠ₯ - JavaScript μ‚¬μš© -->
	<!-- <p><a herf="19_form.html?name=홍길동">μž…λ ₯νŽ˜μ΄μ§€ 이동</a></p> -->
	<p><a herf="19_form.html?name=honggildong">μž…λ ₯νŽ˜μ΄μ§€ 이동</a></p>
</body>
</html>

🌟input νƒœκ·Έ

🌟input νƒœκ·Έ : μ‚¬μš©μžλ‘œλΆ€ν„° 값을 μž…λ ₯λ°›κΈ° μœ„ν•œ νƒœκ·Έ - μž…λ ₯νƒœκ·Έ

🌟type 속성 : μž…λ ₯κ°’μ˜ ν˜•μ‹μ„ μ†μ„±κ°’μœΌλ‘œ μ„€μ •

🌟name 속성 : νƒœκ·Έμ˜ 이름을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • - μ›Ήν”„λ‘œκ·Έλž¨μ— 값을 전달할 λ•Œ μ‚¬μš©ν•˜λŠ” μ‹λ³„μž μ—­ν•  μˆ˜ν–‰

🌟value 속성 : μž…λ ₯νƒœκ·Έμ˜ μ΄ˆκΈ°κ°’μ„ μ†μ„±κ°’μœΌλ‘œ μ„€μ •

🌠size 속성 : μž…λ ₯νƒœκ·Έμ˜ 크기(폭)을 μ†μ„±κ°’μœΌλ‘œ μ„€μ •

🌠maxlength 속성 : μž…λ ₯νƒœκ·Έμ— μž…λ ₯ κ°€λŠ₯ν•œ μ΅œλŒ€ 문자 갯수λ₯Ό μ†μ„±κ°’μœΌλ‘œ μ„€μ •

🌠autofocus 속성(HTML5) : μž…λ ₯νƒœκ·Έμ— μž…λ ₯촛점(Focus)을 μœ„μΉ˜ μ‹œν‚€λŠ” 속성 - 속성값 μƒλž΅ κ°€λŠ₯

🌠required 속성(HTML5) : ν•„μˆ˜ μž…λ ₯값을 μ„€μ •ν•˜κΈ° μœ„ν•œ 속성 - 속성값 μƒλž΅ κ°€λŠ₯

β†’ required 속상이 μ„€μ •λœ μž…λ ₯νƒœκ·Έμ— μž…λ ₯값이 μ—†λŠ” 경우 μ›Ήν”„λ‘œκ·Έλž¨ μš”μ²­ λΆˆκ°€λŠ₯

🌠placeholder 속성(HTML5) : μž…λ ₯νƒœκ·Έμ˜ μž…λ ₯값에 λŒ€ν•œ μ„€λͺ…을 μ†μ„±κ°’μœΌλ‘œ μ„€μ •

β†’ placeholder 속성이 μ„€μ •λœ μž…λ ₯νƒœκ·Έμ— 값을 μž…λ ₯ν•˜λ©΄ μ„€λͺ…은 μžλ™ μ†Œλ©Έ

🌠readonly 속성 : μž…λ ₯νƒœκ·Έλ₯Ό 읽기 μ „μš©μœΌλ‘œ μ„€μ •ν•˜λŠ” 속성 - 속성값 μƒλž΅ κ°€λŠ₯

🌠disabled 속성 : μž…λ ₯νƒœκ·Έλ₯Ό λΉ„ν™œμ„±ν™” μ²˜λ¦¬ν•˜λŠ” 속성 - 속성값 μƒλž΅ κ°€λŠ₯

🌠checked 속성 : μš°μ„  선택 μ„€μ • 속성(radio λ˜λŠ” checkbox) - 속성값 μƒλž΅ κ°€λŠ₯

🌠min 속성(HTML5) : μž…λ ₯νƒœκ·Έμ˜ μ΅œμ†Œ μž…λ ₯값을 μ†μ„±κ°’μœΌλ‘œ μ„€μ •

🌠max 속성(HTML5) : μž…λ ₯νƒœκ·Έμ˜ μ΅œλŒ€ μž…λ ₯값을 μ†μ„±κ°’μœΌλ‘œ μ„€μ •

🌟type 속성값
β†’ hidden : μ‚¬μš©μžλ‘œλΆ€ν„° 값을 μž…λ ₯받지 μ•Šκ³  μš”μ²­ μ›Ήν”„λ‘œκ·Έλž¨μ—κ²Œ ν•„μš”ν•œ κ°’ 전달
β†’ text : μ‚¬μš©μžλ‘œλΆ€ν„° λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달
β†’ password : μ‚¬μš©μžλ‘œλΆ€ν„° λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - μž…λ ₯값이 νŠΉμ •λ¬Έμž λ³€ν™˜λ˜μ–΄ ν‘œμ‹œ
β†’ radio : name 속성값이 같은 μž…λ ₯νƒœκ·Έ 쀑 ν•˜λ‚˜λ₯Ό μ„ νƒν•˜μ—¬ 전달
β†’ checkbox : name 속성값이 같은 μž…λ ₯νƒœκ·Έ 쀑 1개 이상을 μ„ νƒν•˜μ—¬ 전달
β†’ file : νŒŒμΌμ„ μž…λ ₯λ°›μ•„ 전달
β†’ email(HTML5) : 이메일을 μž…λ ₯λ°›μ•„ 전달 - 이메일 ν˜•μ‹μ— λŒ€ν•œ 검증 처리
β†’ number(HTML5) : 숫자 ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달(증가 λ˜λŠ” κ°μ†Œ λ²„νŠΌ 제곡)
β€»μˆ«μž ν˜•μ‹μ™Έμ˜ 값은 μž…λ ₯ λΆˆκ°€λŠ₯(μ΅œμ†Œκ°’ λ˜λŠ” μ΅œλŒ€κ°’ 검증 처리)
β†’ tel(HTML5) : μ „ν™”λ²ˆν˜Έ ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μž…λ ₯νŒ¨λ“œ λ³€ν™˜
β†’ url(HTML5) : URL μ£Όμ†Œ ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μž…λ ₯νŒ¨λ“œ λ³€ν™˜
β†’ search(HTML5) : 검색 κ΄€λ ¨ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μžλ™μ™„μ„± κΈ°λŠ₯ μ‚¬μš©
β†’ color(HTML5) : 색을 μž…λ ₯λ°›μ•„ 색상값(#RRGGBB)을 전달 - 색 선택 κ°€λŠ₯
β†’ range(HTML5) : 등급을 μž…λ ₯λ°›μ•„ 전달 - min 속성값과 max μ†μ„±κ°’μœΌλ‘œ λ²”μœ„ μ„€μ •
β†’ date(HTML5) : λ‚ μ§œ(λ…„-μ›”-일)λ₯Ό μž…λ ₯λ°›μ•„ 전달 - 달λ ₯을 μ΄μš©ν•˜μ—¬ λ‚ μ§œ 선택
β†’ time(HTML5) : μ‹œκ°„({μ˜€μ „|μ˜€ν›„}μ‹œ:λΆ„)을 μž…λ ₯λ°›μ•„ 전달 - μ‹œκ³„λ₯Ό μ΄μš©ν•˜μ—¬ μ‹œκ°„ 선택
β†’ datetime-local(HTML5) : λ‚ μ§œ(λ…„-μ›”-일)와 μ‹œκ°„({μ˜€μ „|μ˜€ν›„}μ‹œ:λΆ„)을 μž…λ ₯λ°›μ•„ 전달 - 달λ ₯κ³Ό μ‹œκ³„ 이용

β—ˆ form νƒœκ·ΈλŠ” μž…λ ₯νƒœκ·Έμ™Έμ— 제좜 이벀트(Submit Event)λ₯Ό λ°œμƒν•˜λŠ” νƒœκ·Έκ°€ λ°˜λ“œμ‹œ 쑴재
β—ˆ 제좜 이벀트(Submit Event)κ°€ λ°œμƒλ˜λ©΄ form νƒœκ·Έκ°€ μ‹€ν–‰λ˜μ–΄ μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•΄ μž…λ ₯κ°’ 전달
β†’ input νƒœκ·Έμ˜ type 속성값을 [submit]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 이벀트 λ°œμƒ
β†’ button νƒœκ·Έμ˜ type 속성값을 [submit]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 이벀트 λ°œμƒ

<!--<input type="submit" value="νšŒμ›κ°€μž…"> -->
<button type="submit">νšŒμ›κ°€μž…</button>

β—ˆ form νƒœκ·Έμ˜ ν•˜μœ„νƒœκ·Έλ‘œ μž…λ ₯νƒœκ·Έμ˜ μž…λ ₯값을 μ΄ˆκΈ°ν™” μ²˜λ¦¬ν•˜λŠ” κΈ°λŠ₯을 μ œκ³΅ν•˜λŠ” μ΄ˆκΈ°ν™” νƒœκ·Έ μž‘μ„± κ°€λŠ₯
β†’ input νƒœκ·Έμ˜ type 속성값을 [reset]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 μ΄ˆκΈ°ν™”
β†’ button νƒœκ·Έμ˜ type 속성값을 [reset]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 μ΄ˆκΈ°ν™”

<!--<input type="reset" value="λ‹€μ‹œμž…λ ₯"> -->
<button type="reset">λ‹€μ‹œμž…λ ₯</button>

πŸ“ƒ20_input.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>input νƒœκ·Έ</h1>
	<hr>
	<!-- β˜…input νƒœκ·Έ : μ‚¬μš©μžλ‘œλΆ€ν„° 값을 μž…λ ₯λ°›κΈ° μœ„ν•œ νƒœκ·Έ - μž…λ ₯νƒœκ·Έ -->
	<!-- β˜…type 속성 : μž…λ ₯κ°’μ˜ ν˜•μ‹μ„ μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- β˜…name 속성 : νƒœκ·Έμ˜ 이름을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • - μ›Ήν”„λ‘œκ·Έλž¨μ— 값을 전달할 λ•Œ μ‚¬μš©ν•˜λŠ” μ‹λ³„μž μ—­ν•  μˆ˜ν–‰ -->
	<!-- β˜…value 속성 : μž…λ ₯νƒœκ·Έμ˜ μ΄ˆκΈ°κ°’μ„ μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- size 속성 : μž…λ ₯νƒœκ·Έμ˜ 크기(폭)을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- maxlength 속성 : μž…λ ₯νƒœκ·Έμ— μž…λ ₯ κ°€λŠ₯ν•œ μ΅œλŒ€ 문자 갯수λ₯Ό μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- autofocus 속성(HTML5) : μž…λ ₯νƒœκ·Έμ— μž…λ ₯촛점(Focus)을 μœ„μΉ˜ μ‹œν‚€λŠ” 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- required 속성(HTML5) : ν•„μˆ˜ μž…λ ₯값을 μ„€μ •ν•˜κΈ° μœ„ν•œ 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- β†’ required 속상이 μ„€μ •λœ μž…λ ₯νƒœκ·Έμ— μž…λ ₯값이 μ—†λŠ” 경우 μ›Ήν”„λ‘œκ·Έλž¨ μš”μ²­ λΆˆκ°€λŠ₯ -->
	<!-- placeholder 속성(HTML5) : μž…λ ₯νƒœκ·Έμ˜ μž…λ ₯값에 λŒ€ν•œ μ„€λͺ…을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- β†’ placeholder 속성이 μ„€μ •λœ μž…λ ₯νƒœκ·Έμ— 값을 μž…λ ₯ν•˜λ©΄ μ„€λͺ…은 μžλ™ μ†Œλ©Έ -->
	<!-- readonly 속성 : μž…λ ₯νƒœκ·Έλ₯Ό 읽기 μ „μš©μœΌλ‘œ μ„€μ •ν•˜λŠ” 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- disabled 속성 : μž…λ ₯νƒœκ·Έλ₯Ό λΉ„ν™œμ„±ν™” μ²˜λ¦¬ν•˜λŠ” 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- checked 속성 : μš°μ„  선택 μ„€μ • 속성(radio λ˜λŠ” checkbox) - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- min 속성(HTML5) : μž…λ ₯νƒœκ·Έμ˜ μ΅œμ†Œ μž…λ ₯값을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- max 속성(HTML5) : μž…λ ₯νƒœκ·Έμ˜ μ΅œλŒ€ μž…λ ₯값을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- β˜…type 속성값 -->
	<!-- β†’ hidden : μ‚¬μš©μžλ‘œλΆ€ν„° 값을 μž…λ ₯받지 μ•Šκ³  μš”μ²­ μ›Ήν”„λ‘œκ·Έλž¨μ—κ²Œ ν•„μš”ν•œ κ°’ 전달 -->
	<!-- β†’ text : μ‚¬μš©μžλ‘œλΆ€ν„° λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 -->
	<!-- β†’ password : μ‚¬μš©μžλ‘œλΆ€ν„° λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - μž…λ ₯값이 νŠΉμ •λ¬Έμž λ³€ν™˜λ˜μ–΄ ν‘œμ‹œ-->
	<!-- β†’ radio : name 속성값이 같은 μž…λ ₯νƒœκ·Έ 쀑 ν•˜λ‚˜λ₯Ό μ„ νƒν•˜μ—¬ 전달 -->
	<!-- β†’ checkbox : name 속성값이 같은 μž…λ ₯νƒœκ·Έ 쀑 1개 이상을 μ„ νƒν•˜μ—¬ 전달 -->
	<!-- β†’ file : νŒŒμΌμ„ μž…λ ₯λ°›μ•„ 전달 -->
	<!-- β†’ email(HTML5) : 이메일을 μž…λ ₯λ°›μ•„ 전달 - 이메일 ν˜•μ‹μ— λŒ€ν•œ 검증 처리 -->
	<!-- β†’ number(HTML5) : 숫자 ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달(증가 λ˜λŠ” κ°μ†Œ λ²„νŠΌ 제곡) - 숫자 ν˜•μ‹μ™Έμ˜ 값은 μž…λ ₯ λΆˆκ°€λŠ₯(μ΅œμ†Œκ°’ λ˜λŠ” μ΅œλŒ€κ°’ 검증 처리) -->
	<!-- β†’ tel(HTML5) : μ „ν™”λ²ˆν˜Έ ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μž…λ ₯νŒ¨λ“œ λ³€ν™˜ -->
	<!-- β†’ url(HTML5) : URL μ£Όμ†Œ ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μž…λ ₯νŒ¨λ“œ λ³€ν™˜ -->
	<!-- β†’ search(HTML5) : 검색 κ΄€λ ¨ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μžλ™μ™„μ„± κΈ°λŠ₯ μ‚¬μš© -->
	<!-- β†’ color(HTML5) : 색을 μž…λ ₯λ°›μ•„ 색상값(#RRGGBB)을 전달 - 색 선택 κ°€λŠ₯ -->
	<!-- β†’ range(HTML5) : 등급을 μž…λ ₯λ°›μ•„ 전달 - min 속성값과 max μ†μ„±κ°’μœΌλ‘œ λ²”μœ„ μ„€μ • -->
	<!-- β†’ date(HTML5) : λ‚ μ§œ(λ…„-μ›”-일)λ₯Ό μž…λ ₯λ°›μ•„ 전달 - 달λ ₯을 μ΄μš©ν•˜μ—¬ λ‚ μ§œ 선택 -->
	<!-- β†’ time(HTML5) : μ‹œκ°„({μ˜€μ „|μ˜€ν›„}μ‹œ:λΆ„)을 μž…λ ₯λ°›μ•„ 전달 - μ‹œκ³„λ₯Ό μ΄μš©ν•˜μ—¬ μ‹œκ°„ 선택 -->
	<!-- β†’ datetime-local(HTML5) : λ‚ μ§œ(λ…„-μ›”-일)와 μ‹œκ°„({μ˜€μ „|μ˜€ν›„}μ‹œ:λΆ„)을 μž…λ ₯λ°›μ•„ 전달 - 달λ ₯κ³Ό μ‹œκ³„ 이용 -->
	<form action="#" method="post">
		<input type="hidden" name="num" value="1000">
		<p>아이디 : <input type="text" name="id" size="10" maxlength="20" autofocus="autofocus" required="required"></p>
		<p>λΉ„λ°€λ²ˆν˜Έ : <input type="text" name="passwd" placeholder="ν˜•μ‹μ— λ§žλŠ” λΉ„λ°€λ²ˆν˜Έ μž…λ ₯"></p>
		<p>이름 : <input type="text" name="name" value="홍길동" readonly="readonly"></p>
		<p>성별 : <input type="radio" name="gender" value="λ‚¨μž">λ‚¨μž
			<input type="radio" name="gender" value="μ—¬μž" checked="checked">μ—¬μž</p>
		<p>μ·¨λ―Έ : <input type="checkbox" name="hobby" value="λ…μ„œ">λ…μ„œ
			<input type="checkbox" name="hobby" value="λ“±μ‚°">λ“±μ‚°
			<input type="checkbox" name="hobby" value="λ‚šμ‹œ">λ‚šμ‹œ
			<input type="checkbox" name="hobby" value="κ²Œμž„">κ²Œμž„</p>
		<p>사진 : <input type="file" name="profile"></p>
		<p>이메일 : <input type="email" name="email"></p>
		<p>λ‚˜μ΄ : <input type="number" name="age" min="1" max="200"></p>
		<p>μ „ν™”λ²ˆν˜Έ : <input type="tel" name="phone"></p>
		<p>SNS : <input type="url" name="sns"></p>
		<p>검색 : <input type="search" name="keyword"></p>
		<p>μ’‹μ•„ν•˜λŠ” 색 : <input type="color" name="color"></p>
		<p>μ‹€λ ₯ : ν•˜ <input type="range" name="grade" min="1" max="5"></p>
		<p>생년월일 : <input type="date" name="birthday"></p>
		<p>κΈ°μƒμ‹œκ°„ : <input type="time" name="uptime"></p>
		<p>μ•ŒλžŒ : <input type="datetime-local" name="alarm"></p>
		<!-- form νƒœκ·ΈλŠ” μž…λ ₯νƒœκ·Έμ™Έμ— 제좜 이벀트(Submit Event)λ₯Ό λ°œμƒν•˜λŠ” νƒœκ·Έκ°€ λ°˜λ“œμ‹œ 쑴재 -->
		<!-- 제좜 이벀트(Submit Event)κ°€ λ°œμƒλ˜λ©΄ form νƒœκ·Έκ°€ μ‹€ν–‰λ˜μ–΄ μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•΄ μž…λ ₯κ°’ 전달 -->
		<!-- β†’ input νƒœκ·Έμ˜ type 속성값을 [submit]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 이벀트 λ°œμƒ -->
		<!-- β†’ button νƒœκ·Έμ˜ type 속성값을 [submit]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 이벀트 λ°œμƒ -->
		<!--<input type="submit" value="νšŒμ›κ°€μž…"> -->
		<button type="submit">νšŒμ›κ°€μž…</button>
		<!-- form νƒœκ·Έμ˜ ν•˜μœ„νƒœκ·Έλ‘œ μž…λ ₯νƒœκ·Έμ˜ μž…λ ₯값을 μ΄ˆκΈ°ν™” μ²˜λ¦¬ν•˜λŠ” κΈ°λŠ₯을 μ œκ³΅ν•˜λŠ” μ΄ˆκΈ°ν™” νƒœκ·Έ μž‘μ„± κ°€λŠ₯ -->
		<!-- β†’ input νƒœκ·Έμ˜ type 속성값을 [reset]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 μ΄ˆκΈ°ν™” -->
		<!-- β†’ button νƒœκ·Έμ˜ type 속성값을 [reset]을 μ„€μ •ν•˜μ—¬ νƒœκ·Έ(λ²„νŠΌ)λ₯Ό ν΄λ¦­ν•œ 경우 μ΄ˆκΈ°ν™” -->
		<!--<input type="reset" value="λ‹€μ‹œμž…λ ₯"> -->
		<button type="reset">λ‹€μ‹œμž…λ ₯</button>
	</form>
</body>
</html>

profile
μž„μŠΉν˜„
이전 포슀트

[HTML 3-3] audioβ€’videoβ€’figure νƒœκ·Έ

λ‹€μŒ 포슀트

[HTML 4-1] labelβ€’textareaβ€’selectβ€’datalistβ€’fieldset νƒœκ·Έ

0개의 λŒ“κΈ€