2023. 2. 8. 14:42ใHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅ ๋ฐ๋ ํ๊ทธ๋ค -->
<input type="text"> <!-- ๋ซ๋ ํ๊ทธ ์์--><br>
<input type="password"><br>
<input type="number"><br>
<input type="date"><br>
<input type="color"><br>
<input type="button" value="ํ์ธ"><br>
<input type="checkbox">์ด๋
<input type="checkbox">๋ ์<br> <!-- ์ฌ๋ฌ๊ฐ ์ ํ ๊ฐ๋ฅ -->
<input type="radio" name="grade">A<br> <!-- ์ฌ๋ฌ๊ฐ ์ค ํ๋๋ง ์ ํ ๊ฐ๋ฅ -->
<input type="radio" name="grade">B<br> <!-- name ์์ฑ ํ์! name ์ด๋ฆ ์ค์ ๋์ผํ๊ฒ ๋ฌถ์ด์ค์ ํ๋๋ง ์ ํ ๊ฐ๋ฅ -->
<input type="radio" name="grade">C<br>
<textarea rows="5" cols="50"></textarea><br>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
๋ก๊ทธ์ธ ์ฐฝ ๋ง๋ค์ด๋ณด๊ธฐ
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
์์ด๋ <input type="text"><br>
๋น๋ฐ๋ฒํธ <input type="password"><br>
<input type="button" value="๋ก๊ทธ์ธ">
</body>
</html>
ํ์๊ฐ์ ์ฐฝ ๋ง๋ค์ด๋ณด๊ธฐ
๋ฐ์ดํฐ ์ค ๋ง์ถ๋ ค๋ฉด ํ ์ด๋ธ ์ฌ์ฉํ์ฌ ํ๋ก ๋ง๋ค์ด์ ํ๋ ๊ฒ์ด ์ข๋ค.
ํ ๋ง๋ค ๋๋ ๋ฌด์กฐ๊ฑด ์ด/ํ ๋ค ๋ง๋ค์ด๋๊ณ ๋ด์ฉ ์์ ํ๊ธฐ!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>-์์ด๋</td>
<td><input type="text"></td>
</tr>
<tr>
<td>-๋น๋ฐ๋ฒํธ</td>
<td><input type="password"></td>
</tr>
<tr>
<td>-๋น๋ฐ๋ฒํธ ํ์ธ</td>
<td><input type="password"></td>
</tr>
<tr>
<td>-์ด๋ฆ</td>
<td><input type="text"></td>
</tr>
<tr>
<td>-์ฑ๋ณ</td>
<td><input type="radio" name=gender>์ฌ์ฑ
<input type="radio" name=gender>๋จ์ฑ
</td>
</tr>
<tr>
<td>-์ ํ๋ฒํธ</td>
<td>
<select>
<option>02</option>
<option>031</option>
<option>052</option>
</select>
<input type="text">
<input type="text">
</td>
</tr>
<tr>
<td>-์ด๋ฉ์ผ</td>
<td><input type="text">@
<select>
<option>์ ํ</option>
<option>naver.com</option>
<option>daum.net</option>
<option>nate.com</option>
</select>
</td>
</tr>
<tr>
<td>-์๊ธฐ์๊ฐ</td>
<td><textarea rows="5" cols="40"></textarea></td>
</tr>
</table>
</body>
</html>
**tip
radio ํ๊ทธ ์ธ ๋ ๋ ์ค ํ๋ ๋ฌด์กฐ๊ฑด ์ ํํด์ผ ํ๋ ํญ๋ชฉ์
ํ๋ฉด ๋จ์๋ง์ ํ๋๋ ์ ํ๋์ด ์๊ฒ ํ ์ ์์
<input type="radio" name=gender checked="checked">์ฌ์ฑ
checked๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ์ฌ์ฑ ์ฒดํฌ ๋ผ์ ๋์ด.
**tip
checked ์์ฑ๊ณผ ๊ฐ์ด checked = "checked" ์ ๋ณ์ด ๊ฐ์ ๊ฒฝ์ฐ ๋ค checked ์๋ตํ๊ณ
<input type="radio" name=gender checked>์ฌ์ฑ ์ธ ์ ์์
**tip
<input type="text" placeholder="ID๋ฅผ ์ ๋ ฅํ์ธ์.">
placeholder="ํํธ"
์์ฑ placeholder๋ฅผ ์ฐ๋ฉด ์๋์ ๊ฐ์ด id ์ ๋ ฅ์ฐฝ์ ํํธ๋ฅผ ์ค ์ ์์
'HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| โ โ div์ span (0) | 2023.02.08 |
|---|---|
| list (0) | 2023.02.08 |
| table (0) | 2023.02.08 |
| HTML ๊ธฐ์ด (0) | 2023.02.07 |