π»HTML5μ μλ‘μ΄ κΈ°λ₯β π»
- HTML5λ‘ λ²μ μ νλ©΄μ κΈ°μ‘΄μλ μ½λλ‘ κ΅¬ννλ κΈ°λ₯λ€μ΄ μμ±μ΄λ μ΅μ μΌλ‘ μ겨 κ°λ¨νκ² κ΅¬ν κ°λ₯ν΄μ‘λ€.
1. placeholder (νλ μ΄μ€νλ)
- μλ΄λ©μμ§
- μ¬μ©μμκ² μ λ ₯ μμλ μ€λͺ μ μ 곡νλ€.
- μλ₯Ό λ€μ΄, μ λ ₯ νλμ "μ΄λ¦μ μ λ ₯ν΄μ£ΌμΈμ"λΌλ μλ΄λ©μμ§κ° μλ€λ©΄ μ¬μ©μλ κ·Έ κ³³μ μμ μ μ΄λ¦μ μ λ ₯νκ² λλ€.
<body>
μ΄λ¦ :
<input type="text" placeholder="μ΄λ¦μ μ
λ ₯νμμ€.">
<br>
λΉλ°λ²νΈ :
<input type="password" placeholder="μνΈλ₯Ό μ
λ ₯νμμ€.">
</body>
2. required
- νμλ‘ μ λ ₯μ λ°μμΌ νλ νλμ μ¬μ©λλ μμ±μ΄λ€.
- μ΄ μμ±μ΄ μ€μ λ κ²½μ°, μ¬μ©μλ ν΄λΉ νλμ κ°μ λ°λμ μ λ ₯ν΄μΌ νλ€.
- κ°μ΄ μ λ ₯νμ§ μκ³ λ²νΌμ λλ μ κ²½μ°, μλ¬λ©μμ§λ₯Ό νμνλ€.
- μμ΄μ½ λ° μλ¬λ©μμ§ μμ μ΄ λ³΅μ‘νλ€.
<body>
<form method="POST" action="ex18_server.jsp">
<h3>λ‘κ·ΈμΈ(νμμ
λ ₯)</h3>
μμ΄λ: <input type="text" placeholder="μ΄λ¦μ μ
λ ₯νμμ€." required><br>
μνΈ: <input type="password" placeholder="μνΈλ₯Ό μ
λ ₯νμμ€." required><br>
<input type="submit" value="λ‘κ·ΈμΈ">
<hr>
</form>
</body>
3. email, url
- <input> μμμ type κ°μΌλ‘ μ§μ νλ€.
- ν΄λΉ νμμ΄ μλ κ° μ λ ₯ ν λ²νΌμ λλ₯΄λ©΄, μλ¬λ©μμ§λ₯Ό νμνλ€.
<body>
<form method="POST" action="ex18_server.jsp">
μ΄λ©μΌ: <input type="email">
<input type="submit" value="μ μ‘νκΈ°">
<hr>
URL : <input type="url">
<input type="submit" value="μ μ‘νκΈ°">
<hr>
</form>
</body>
4. number
- <input> μμμ type κ°μΌλ‘ μ§μ νλ€.
- μ¦κ°λ²νΌμ μ¬μ©νμ¬ μ«μλ₯Ό μ νν μ μκ² ν΄μ€λ€.
- minκ³Ό max μμ±μ μ¬μ©νμ¬ λ²μλ₯Ό μ€μ ν μ μλ€.
- step μμ±μ ν΅ν΄ μ¦κ°μΉλ₯Ό μ‘°μ ν μ μλ€. μλ₯Ό λ€μ΄, step="2"λ‘ μ€μ νλ©΄ μ«μκ° 2μ© μ¦κ°νκ±°λ κ°μνλ€.
- λ²μλ₯Ό λμ΄μκ±°λ μ«μκ° μλ λ°μ΄ν°κ° μ λ ₯ ν λ²νΌμ λλ₯΄λ©΄, μλ¬λ©μμ§λ₯Ό νμνλ€.
<body>
<form method="POST" action="ex18_server.jsp">
λμ΄: <input type="number" min="19" max="80" step="10">
<input type="submit" value="μ μ‘νκΈ°">
</form>
</body>
5. range
- <input> μμμ type κ°μΌλ‘ μ§μ νλ€.
- μ€ν¬λ‘€λ°λ₯Ό μ¬μ©νμ¬ μ«μλ₯Ό μ νν μ μκ² ν΄μ€λ€.
- minκ³Ό max μμ±μ μ¬μ©νμ¬ λ²μλ₯Ό μ€μ ν μ μλ€.
- step μμ±μ ν΅ν΄ μ¦κ°μΉλ₯Ό μ‘°μ ν μ μλ€.
<body>
<form method="POST" action="ex18_server.jsp">
λ²μ: <input type="range" onchange="document.getElementById('txt1').value=this.value;" min="10" max="120" step="10">
<br>
<input type="text" id="txt1" size="10">
</form>
</body>
6. color
- <input> μμμ type κ°μΌλ‘ μ§μ νλ€.
- μ¬μ©μκ° μμμ μ νν μ μλ μ λ ₯ νλλ₯Ό μμ±νλ€.
<body>
<form method="POST" action="ex18_server.jsp">
μμ:<input type="color" onchange="document.body.bgColor=this.value;">
</form>
</body>
7. λ μ§ μκ° μ ν
1) date
- μ¬μ©μκ° λ¬λ ₯μμ λ μ§λ₯Ό μ νν μ μλ μ λ ₯ νλλ₯Ό μμ±νλ€.
2) month
- μ¬μ©μκ° μ°λμ μμ μ νν μ μλ μ λ ₯ νλλ₯Ό μμ±νλ€.
3) week
- μ¬μ©μκ° μ£Όμ°¨λ₯Ό μ νν μ μλ μ λ ₯ νλλ₯Ό μμ±νλ€.
4) titme
- μ¬μ©μκ° μκ°μ μ νν μ μλ μ λ ₯ νλλ₯Ό μμ±νλ€.
5) datetime
- λ μ§μ μκ°μ λͺ¨λ μ νν μ μλ μ λ ₯ νλλ₯Ό μμ±νλ€.
- μμ§ ν΄λΉ κΈ°λ₯μ΄ μλ λΈλΌμ°μ κ° μλ€.
6) datetime-local
- μ¬μ©μκ° μ§μ μκ° κΈ°μ€μΌλ‘ λ μ§μ μκ°μ μ νν μ μλ μ λ ₯ νλλ₯Ό μμ±νλ€.
<body>
<form method="POST" action="ex18_server.jsp">
λ μ§: <input type="date">
<br>
μ: <input type="month">
<br>
μ£Ό: <input type="week">
<br>
μκ°: <input type="time">
<br>
λ μ§ μκ°: <input type="datetime-local">
</form>
</body>
'WEB > HTML' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [HTML] HTML5μ μλ‘μ΄ κΈ°λ₯β‘ (progress, meter, details, fieldset, marquee,video) (0) | 2023.09.24 |
|---|---|
| [HTML] νΌ <form>, <input>, <select>, <textarea> νκ·Έ (0) | 2023.09.21 |
| [HTML] table νκ·Έ (μμ±, μμ, μ λ ¬, ν¬κΈ°, μ λ³ν©) (0) | 2023.09.21 |
| [HTML] μΈλΌμΈ νκ·Έμ λΈλ νκ·Έ (0) | 2023.09.20 |
| [HTML] img νκ·Έ (src, alt, width, height, border) (0) | 2023.09.20 |
