λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
Frontend/HTML

[HTML]14_input νƒœκ·Έ

by sukii 2023. 12. 26.
λ°˜μ‘ν˜•

14_input.html 파일 μ½”λ“œπŸ‘©‍πŸ’»

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>

<body>
	<h1>input νƒœκ·Έ</h1>
	<hr>
	<!-- input νƒœκ·Έ : μ‚¬μš©μžλ‘œλΆ€ν„° λ¬Έμžκ°’(파일)을 μž…λ ₯λ°›κΈ° μœ„ν•œ νƒœκ·Έ - μž…λ ₯νƒœκ·Έ -->
	<!-- type 속성 : κ°’(파일)을 μž…λ ₯λ°›κΈ° μœ„ν•œ ν˜•νƒœλ₯Ό μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- name 속성 : νƒœκ·Έμ˜ 이름을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • - νƒœκ·Έλ₯Ό κ΅¬λΆ„ν•˜κΈ° μœ„ν•œ μ‹λ³„μžλ‘œ μ‚¬μš© : μž…λ ₯κ°’ 검증(JavaScript) -->
	<!-- => μ›Ήν”„λ‘œκ·Έλž¨μ—μ„œ 전달값을 κ΅¬λΆ„ν•˜κΈ° μœ„ν•œ μ‹λ³„μžλ‘œ μ‚¬μš©(Java - Servlet) -->
	<!-- value 속성 : μž…λ ₯νƒœκ·Έμ˜ μ΄ˆκΈ°κ°’μ„ μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- size 속성 : μž…λ ₯νƒœκ·Έμ˜ 크기λ₯Ό μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- maxlength 속성 : μ΅œλŒ€ μž…λ ₯ κ°€λŠ₯ν•œ 문자의 갯수λ₯Ό μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- autofocus 속성(HTML5) : νƒœκ·Έμ— 포컀슀(Focus)λ₯Ό μ œκ³΅ν•˜λŠ” 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- required 속성(HTML5) : μž…λ ₯νƒœκ·Έμ— 값을 λ°˜λ“œμ‹œ μž…λ ₯ν•˜λ„λ‘ μ„€μ •ν•˜κΈ° 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- => required 속성이 μ„€μ •λœ μž…λ ₯νƒœκ·Έμ— μž…λ ₯값이 μ—†λŠ” 경우 μ—λŸ¬ 메세지 좜λ ₯ - form νƒœκ·Έ λ―Έλ™μž‘ -->
	<!-- placeholder 속성(HTML5) : μž…λ ₯νƒœκ·Έμ— μž…λ ₯값에 λŒ€ν•œ μ„€λͺ…을 μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- => placeholder 속성이 μ„€μ •λœ μž…λ ₯νƒœκ·Έμ— 값이 μž…λ ₯되면 μ„€λͺ…문은 μžλ™ μ†Œλ©Έ -->
	<!-- readonly 속성 : μž…λ ₯νƒœκ·Έλ₯Ό 읽기 μ „μš©μœΌλ‘œ μ„€μ •ν•˜κΈ° μœ„ν•œ 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- checked 속성 : μš°μ„  선택 κΈ°λŠ₯을 μ œκ³΅ν•˜κΈ° μœ„ν•œ 속성 - 속성값 μƒλž΅ κ°€λŠ₯ -->
	<!-- min 속성 : μž…λ ₯νƒœκ·Έμ— μž…λ ₯ κ°€λŠ₯ν•œ μ΅œμ†Œκ°’μ„ μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->
	<!-- max 속성 : μž…λ ₯νƒœκ·Έμ— μž…λ ₯ κ°€λŠ₯ν•œ μ΅œλŒ€κ°’μ„ μ†μ„±κ°’μœΌλ‘œ μ„€μ • -->

	<!-- type 속성값 -->
	<!-- hidden : μž…λ ₯νƒœκ·Έλ₯Ό 숨겨 μ‚¬μš©μžλ‘œλΆ€ν„° 값을 μž…λ ₯λ°›μ•„ μ•Šκ³  μ›Ήν”„λ‘œκ·Έλž¨μ— ν•„μš”ν•œ μž„μ˜κ°’μ„ 전달 -->
	<!-- text : ν‚€λ³΄λ“œλ‘œ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 -->
	<!-- password : ν‚€λ³΄λ“œλ‘œ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - μž…λ ₯된 λ¬Έμžκ°€ νŠΉμ • 문자둜 λ³€ν™˜λ˜μ–΄ ν‘œμ‹œ -->
	<!-- radio : name 속성값이 같은 μž…λ ₯νƒœκ·Έ 쀑 ν•˜λ‚˜λ₯Ό μ„ νƒν•˜μ—¬ 전달 -->
	<!-- checkbox : name 속성값이 같은 μž…λ ₯νƒœκ·Έ 쀑 ν•˜λ‚˜ 이상을 μ„ νƒν•˜μ—¬ 전달 -->
	<!-- file : νŒŒμΌμ„ μž…λ ₯λ°›μ•„ 전달 - form νƒœκ·Έμ˜ enctype 속성값을 [multipart/form-data]둜 μ„€μ • -->
	<!-- email(HTML5) : 이메일 ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 이메일 ν˜•μ‹μ— λŒ€ν•œ 검증 κΈ°λŠ₯ 제곡 -->
	<!-- number(HTML5) : 숫자 ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 증가 λ˜λŠ” κ°μ†Œ λ²„νŠΌ 제곡 -->
	<!-- => 숫자 ν˜•μ‹μ˜ 문자만 μž…λ ₯ κ°€λŠ₯ν•˜λ©° min 속성값 및 max 속성값에 λŒ€ν•œ 검증 κΈ°λŠ₯ 제곡 -->
	<!-- tel(HTML5) : μ „ν™”λ²ˆν˜Έ ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μž…λ ₯νŒ¨λ“œ λ³€κ²½ -->
	<!-- url(HTML5) : URL μ£Όμ†Œ ν˜•μ‹μ˜ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μž…λ ₯νŒ¨λ“œ λ³€κ²½ -->
	<!-- search(HTML5) : 검색 κ΄€λ ¨ λ¬Έμžκ°’μ„ μž…λ ₯λ°›μ•„ 전달 - 슀마트기기의 μžλ™μ™„μ„± κΈ°λŠ₯ μ‚¬μš© -->
	<!-- color(HTML5) : 색을 μ„ νƒν•˜μ—¬ 색상값(#RRGGBB) ν˜•μ‹μ˜ λ¬Έμžκ°’μœΌλ‘œ 전달 -->
	<!-- range(HTML5) : min 속성값과 max μ†μ„±κ°’μ˜ λ²”μœ„μ˜ κ°’ 쀑 ν•˜λ‚˜λ₯Ό μ„ νƒν•˜μ—¬ 전달 -->
	<!-- date(HTML5) : λ‚ μ§œ ν˜•μ‹μ˜ λ¬Έμžκ°’(yyyy-mm-dd)을 μž…λ ₯λ°›μ•„ 전달 - λ‚ μ§œλ₯Ό μ„ νƒν•˜λŠ” λ°•μŠ€λͺ¨λΈ 제곡 -->
	<!-- date(HTML5) : λ‚ μ§œ ν˜•μ‹μ˜ λ¬Έμžκ°’(yyyy-mm-dd)을 μž…λ ₯λ°›μ•„ 전달 - λ‚ μ§œλ₯Ό μ„ νƒν•˜λŠ” λ°•μŠ€λͺ¨λΈ 제곡 -->
	<!-- time(HTML5) : μ‹œκ°„ ν˜•μ‹μ˜ λ¬Έμžκ°’({AM|PM} HH:mm)을 μž…λ ₯λ°›μ•„ 전달 - μ‹œκ°„μ„ μ„ νƒν•˜λŠ” λ°•μŠ€λͺ¨λΈ 제곡 -->
	<!-- 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 required></p>
		<p>λΉ„λ°€λ²ˆν˜Έ : <input type="password" name="passwd" placeholder="λΉ„λ°€λ²ˆν˜Έ μž…λ ₯"></p>
		<p>이름 : <input type="text" name="name" value="홍길동" readonly></p>
		<p>성별 : <input type="radio" name="gender" value="M">λ‚¨μž
			<input type="radio" name="gender" value="W" 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="photo"></p>
		<p>이메일 : <input type="email" name="email"></p>
		<p>λ‚˜μ΄ : <input type="number" name="age" min="1" max="100"></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>Java μ‹€λ ₯ : ν•˜<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="alram"></p>

		<!-- form νƒœκ·Έμ˜ ν•˜μœ„νƒœκ·Έλ‘œ μž…λ ₯νƒœκ·Έμ™Έμ— 제좜 이벀트λ₯Ό λ°œμƒν•˜λŠ” νƒœκ·Έλ₯Ό λ°˜λ“œμ‹œ μž‘μ„± -->
		<!-- => 제좜 μ΄λ²€νŠΈκ°€ λ°œμƒλ˜λ©΄ form νƒœκ·Έκ°€ μ‹€ν–‰λ˜μ–΄ μ›Ήν”„λ‘œκ·Έλž¨μ„ μš”μ²­ν•΄ μž…λ ₯κ°’ 전달 κ°€λŠ₯ -->
		<!-- input νƒœκ·Έμ˜ type 속성값을 [submit]으둜 μ„€μ •ν•˜λ©΄ νƒœκ·Έλ₯Ό ν΄λ¦­ν•œ 제좜 이벀트 λ°œμƒ -->
		<!-- => λ²„νŠΌ ν˜•μ‹μœΌλ‘œ 좜λ ₯되며 value μ†μ„±κ°’μœΌλ‘œ λ²„νŠΌμ˜ 라벨λͺ… μ„€μ • -->
		<!-- <input type="submit" value="νšŒμ›κ°€μž…"> -->
		<button type="submit">νšŒμ›κ°€μž…</button>

		<!-- form νƒœκ·Έμ˜ ν•˜μœ„νƒœκ·Έλ‘œ μž…λ ₯νƒœκ·Έμ˜ μž…λ ₯값을 μ΄ˆκΈ°ν™” μ²˜λ¦¬ν•˜λŠ” κΈ°λŠ₯을 νƒœκ·Έ μž‘μ„± κ°€λŠ₯ -->
		<!-- input νƒœκ·Έμ˜ type 속성값을 [reset]으둜 μ„€μ •ν•˜λ©΄ μž…λ ₯νƒœκ·Έμ˜ μž…λ ₯값을 μ΄ˆκΈ°ν™” 처리 - μ΄ˆκΈ°ν™” 이벀트(Reset Event) -->
		<!-- <input type="reset" value="λ‹€μ‹œμž…λ ₯"> -->
		<!-- button νƒœκ·Έμ˜ type 속성값을 [reset]으둜 μ„€μ •ν•˜λ©΄ λ²„νŠΌμ„ ν΄λ¦­ν•œ 경우 μ΄ˆκΈ°ν™” 이벀트 λ°œμƒ -->
		<button type="reset">λ‹€μ‹œμž…λ ₯</button>
	</form>
</body>

</html>

 

 

μ‹€ν–‰ 결과⬇️

λ°˜μ‘ν˜•

'Frontend > HTML' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[HTML]16_label νƒœκ·Έ  (0) 2023.12.26
[HTML]15_label νƒœκ·Έ  (1) 2023.12.26
[HTML]13_form νƒœκ·Έ  (1) 2023.12.26
[HTML]11&12_audio/video νƒœκ·Έ  (1) 2023.12.26
[HTML]10_iframe νƒœκ·Έ  (0) 2023.12.25

κ΄€λ ¨κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”