๋ชฉ์ฐจ
[๐ฑ๋ชฉ์ฐจ๐ฑ]
- ํผ ํ๊ทธ ์ข
๋ฅ
- input ํ๊ทธ
01. ํผ ํ๊ทธ(form tag) ์ข ๋ฅ
form tag ๋ ์ฌ์ฉ์๋ก๋ถํฐ ์ ๋ ฅ๋ฐ๋ ์์(input, select, textarea)๋ค์ ๊ฐ์ธ๋ ํ๊ทธ์ ๋๋ค. form tag์ ์์ฑ์ action, method ๊ฐ ์๋๋ฐ, "์๋ฒ"๊ด๋ จ ๋ด์์ด๋ฏ๋ก ์ถํ์ ์๊ฐํด๋๋ฆฌ๊ฒ ์ต๋๋ค.
01-1. INPUT ํ๊ทธ
์ ๋ ฅ ๊ฐ์ ๋ฐ๋ ํ๊ทธ ์ ๋๋ค. ์์ฑ์ type , value , name์ด ์์ต๋๋ค. ๋จผ์ input ํ๊ทธ๋ form ํ๊ทธ ์์์ ์ถ๊ฐ๋๋ ์ ๋ ฅ ์์๋ค ์ค ์ค์ํ ํ๊ทธ์ ๋๋ค. inputํ๊ทธ๋ ์ด์ฉ์๋ก ํ์ฌ๊ธ ์ ๋ณด๋ฅผ ๋ฐ์๋ค์ด๋ ์ฉ๋๋ก ์ฌ์ฉ๋๊ฒ ๋ฉ๋๋ค. input ํ๊ทธ์ type์ด๋ผ๋ ์์ฑ์ ์ด์ฉํ์ฌ ์ ๋ ฅ ์์์ ์ฌ๋ฌ๊ฐ์ง๋ก ๋ณ๊ฒฝํ์ฌ ์ฌ์ฉํฉ๋๋ค. inputํ๊ทธ๋ ์ข ๋ฃํ๊ทธ๊ฐ ์์ผ๋ฉฐ ๊ฐ ์์ฑ์ ์ญํ ์ ์๋์ ๊ฐ์ต๋๋ค.
- type : ์ ๋ ฅ ํ๊ทธ์ ์ ํ
- value : ์ ๋ ฅ ํ๊ทธ์ ์ด๊ธฐ๊ฐ์ ๋งํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ๋ณ๊ฒฝ ๊ฐ๋ฅํฉ๋๋ค.
- name : ์๋ฒ๋ก ์ ๋ฌ๋๋ ์ด๋ฆ์ ๋งํฉ๋๋ค.
| type ์์ฑ๊ฐ | |
| button | ๋ฒํผ์ ์์ฑํฉ๋๋ค <input type ="button" value="๋ฒํผ"/> |
| text | ํ ์คํธ๋ฅผ ์ ๋ ฅํ๋ ์ฐฝ์ ์์ฑํฉ๋๋ค. |
| password | ๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ๋ ํผ์ ์์ฑํฉ๋๋ค. +์ ๋ ฅ ๊ฐ์ ์๋์ผ๋ก ์๋ณด์ด๊ฒ ์ฒ๋ฆฌํฉ๋๋ค. -> ์ค์ํ๊ฑฐ๋ ๋น๋ฐ ํ ์คํธ ๊ฐ์ ์ ๋ฌํ๋ ๊ธฐ๋ฅ์ ํฉ๋๋ค. |
| radio | ์ฌ๋ฌ ์ ํ์ง ์ค ํ๋๋ง ์ ํ๊ฐ๋ฅํ ๋ผ๋์ค ๋ฒํผ์ ์์ฑํฉ๋๋ค. name : ๋ผ๋์ค ๋ฒํผ์ ์ด๋ฆ, ๊ฐ์ name์ ๊ฐ์ง๋ ๋ผ๋์ค ๋ฒํผ์ ํ๋๋ง ์ ํ์ด ๊ฐ๋ฅ -> ํ๋๋ฅผ ์ ํํ๋ฉด ๋ค๋ฅธ ์ ํ ๊ฐ์ด ์ทจ์๋จ value : ๋ผ๋์ค ๋ฒํผ์ด ์ค์ ๋ก ์ ๋ฌํ๋ ๊ฐ์ ์ง์ checked : ํ๋ฉด ์ต์ด ๋ก๋ฉ ์์ ์ ํ ๋ ์ํ๋ก ๋ก๋ฉ |
| checkbox | ์ฌ๋ฌ ์ ํ์ง ์ค ์ฌ๋ฌ๊ฐ๋ฅผ ์ ํ ๊ฐ๋ฅํ ์ฒดํฌ๋ฐ์ค๋ฅผ ์์ฑํฉ๋๋ค. name : ์ฒดํฌ๋ฐ์ค์ ์ด๋ฆ, ๊ฐ์ ๋ถ๋ฅ์ ์ฒดํฌ ๋ฐ์ค๋ ๊ฐ์ ์ด๋ฆ์ผ๋ก ์ค์ value : ์ฒดํฌ๋ฐ์ค๊ฐ ์ค์ ๋ก ์ ๋ฌํ๋ ๊ฐ์ ์ง์ checked : ํ๋ฉด ์ต์ด ๋ก๋ฉ ์์ ์ ํ ๋ ์ํ๋ก ๋ก๋ฉ |
| select | ์ ํ ๋ฉ๋ด(๋๋กญ ๋ค์ด)๋ฅผ ๋ง๋๋ ํ๊ทธ |
| textarea | ํ
์คํธ๋ฅผ ์
๋ ฅํ๋ ์์ญ์ฐฝ์ ์์ฑํฉ๋๋ค. cols rows placeholder : default๋ก ์ง์ ๋ ๋ฌธ์ฅ , ์ฌ์ฉ์๊ฐ ์ ๋ ฅ์ ์ฌ๋ผ์ง๋ค. |
| date | ํน์ ๋ ์ง(๋
/์/์ผ)๋ฅผ ์ ํ name : ๋ ์ง ์ ํ ํผ ์ด๋ฆ (type="datetime-local -> ์๊ฐ๊น์ง ์ ํ ๊ฐ๋ฅ) ๊ธฐ์กด์ datetime์ ์ฌ์ฉํ์์ผ๋ ์๊ฐ์ ์๊ฐ๋์ ์ํฅ์ ๋ฐ๊ธฐ ๋๋ฌธ์ ์ ํํ ๋ฐ์ดํฐ ๊ฐ ์ ๋ฌ์ด ๋ถ๊ฐ๋ฅ ํ์ฌ ์ง๊ธ์ ์ฌ์ฉ X |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form & Input tag</title>
<style>
body {
margin-bottom: 500px;
}
</style>
</head>
<body>
<h1>ํผ ํ๊ทธ ์ข
๋ฅ์ ๋ํด ์์๋ณด์</h1>
<!-- form tag: ์ฌ์ฉ์๋ก๋ถํฐ ์
๋ ฅ๋ฐ๋ ์์(input, select, textarea)๋ค์ ๊ฐ์ธ๋ ํ๊ทธ
form tag์ attribute action, method ๊ฐ ์๋๋ฐ, "์๋ฒ"์ ์ฐ๊ด๋ ๋ด์ฉ -> ์ถํ ์๊ฐ
ํ๋ฉด์ ๋๋ฌ๋์ง ์๋ ์ถ์์ ์ธ ํ๊ทธ (์์)
-->
<form>
<!-- ๋ชจ๋ input type์๋ "name" attribute๋ฅผ ๊ฐ์ง ์ ์์ ("์๋ฒ") -->
<!-- disabled attribute: ํธ์ง ๋ถ๊ฐ๋ฅํ๊ฒ ํจ -->
Text <input type="text">
Text2 <input type="text" disabled>
<br>
<!-- ์น ์ ๊ทผ์ฑ์ ์ ํฉ => ์ฌ์ฉ์๊ฐ ํธ๋ฆฌํ๊ฒ ์ฌ์ฉํ ์ ์๋ค! -->
<label for="user-email">์ด๋ฉ์ผ</label>
<input type="email" id="user-email" placeholder="ex@gmail.com">
<br>
<!-- textarea: ์ฌ๋ฌ์ค์ ์
๋ ฅ๋ฐ๋ ์์
- cols, rows: ๊ฐ๋ก, ์ธ๋ก ๊ธธ์ด๋ฅผ ๋ํ๋
- ๋ง์ฐ์ค๋ก textarea ํฌ๊ธฐ ์กฐ์ ๊ฐ๋ฅ
-->
<textarea cols="30" rows="3" placeholder="๋ฌธ์์ฌํญ์ ์
๋ ฅํด์ฃผ์ธ์."></textarea>
<br>
<input type="color" >
<input type="range" >
<input type="file" >
<input type="number">
<input type="date">
<input type="datetime-local">
<br>
<!-- checkbox, radio๋ ๊ฐ์ name ์์ฑ๊ฐ์ ๋ถ์ฌํด ์นดํ
๊ณ ๋ฆฌํ๋ฅผ ํด์ฃผ์ด์ผ ํจ -->
<!-- checked attribute: ๊ธฐ๋ณธ์ผ๋ก ์ฒดํฌ๋์ด ์๋๋ก ํด์ค -->
<h5>๋น์ ์ ์ทจ๋ฏธ๋?</h5>
<input type="checkbox" name="interest" value="badminton" checked>๋ฐฐ๋๋ฏผํด
<input type="checkbox" name="interest" value="basketball">๋๊ตฌ
<input type="checkbox" name="interest" value="movie">์ํ๋ณด๊ธฐ
<input type="checkbox" name="interest" value="lay_down">๋์์๊ธฐ
<h5>๋น์ ์ ์ฑ๋ณ์?</h5>
<input type="radio" name="gender" value="f" id="genderF" checked><label for="genderF">์ฌ์</label>
<input type="radio" name="gender" value="m" id="genderM"><label for="genderM">๋จ์</label>
<br>
<!-- ๋จ์ํ ๋ฒํผ -->
<input type="button" value="๋ฒํผ1">
<button type="button">๋ฒํผ2</button>
<br>
<!-- ํผ์ "์ ์ถ" ๋ฒํผ -->
<input type="submit" value="์ ์ถ1">
<button type="submit">์ ์ถ2</button>
<br>
<select name="flower">
<optgroup label="red-flower">
<option value="a">์ฅ๋ฏธ</option>
<option value="b">๋๋ฐฑ๊ฝ</option>
<option value="c" selected>๋ชฐ๋ผ</option>
</optgroup>
<optgroup label="white-flower">
<option value="d">๋ฒ๊ฝ</option>
<option value="e">๋ชฉ๋ จ</option>
<option value="f">๋งคํ</option>
</optgroup>
</select>
</form>
</body>
</html>ํผ ํ๊ทธ ์ข ๋ฅ์ ๋ํด ์์๋ณด์
์ค์ต) ์ค๋ฌธ์กฐ์ฌ ํผ ๋ง๋ค๊ธฐ
- ๋์ด๋ ์ฌ๋ฌ๊ฐ์ ์ ํ์ง ์ค ํ๋๋ง ์ ํ
- ๊ฐ์๋ ์ฌ๋ฌ ๊ฐ ์ ํ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Form</title>
</head>
<body>
<h3>์ค๋ฌธ์กฐ์ฌ</h3>
<form >
<label for="name">์ด๋ฆ</label>
<input type="text" id="name" >
<br>
<label for="email">์ด๋ฉ์ผ</label>
<input type="text" id="email">
<br>
<h3>๋์ด</h3>
<input type="radio" name="age" value="1" id="age1">
<label for="age1">10๋ </label>
<input type="radio" name="age" value="2" id="age2">
<label for="age2">20๋ </label>
<input type="radio" name="age" value="3" id="age3">
<label for="age3">30๋ </label>
<input type="radio" name="age" value="4" id="age4">
<label for="age4">40๋ </label>
<input type="radio" name="age" value="5" id="age5">
<label for="age5">50๋ </label>
<input type="radio" name="age" value="6" id="age6">
<label for="age6">60๋ ์ด์ </label>
<br>
<br>
<h3>์ํ๋ ๊ฐ์ (๋ณต์์๋ต ๊ฐ๋ฅํฉ๋๋ค.)</h3>
<input type="checkbox" name="course" value="html" id="html">
<label for="html">html</label>
<input type="checkbox" name="course" value="CSS" id="CSS">
<label for="CSS">CSS</label>
<input type="checkbox" name="course" value="JavaScript" id="JavaScript">
<label for="JavaScript">JavaScript</label>
<br>
<br>
<textarea cols="100" rows="10" placeholder="ํ๊ณ ์ถ์ ๋ง์ด ์๋๊ฐ">
</textarea>
<button> ์ ์ถ</button>
</form>
</body>
</html>'SeSAC > HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [SeSACXCodingOn] ์นํ์คํ๊ณผ์ 1W_2_05 : HTML_Semantic (0) | 2023.07.19 |
|---|---|
| [SeSACXCodingOn] ์นํ์คํ๊ณผ์ 1W_2_04 : HTML_Table (0) | 2023.07.19 |
| [SeSACXCodingOn] ์นํ์คํ๊ณผ์ 1W_2_02 : HTML TAG (0) | 2023.07.19 |
| [SeSACXCodingOn] ์นํ์คํ๊ณผ์ 1W_2_01 : HTML ์ด๋ + ํ๊ณ (0) | 2023.07.19 |
