[CodeLion] 03. HTML (Forms) ๐ฆ
โ๏ธ Forms
1. <form>
์ ๊ธฐ๋ณธ ์์ฑ
<form>
์ ๊ธฐ๋ณธ ์์ฑform ์ด๋ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ ์์ญ.
1-1. form ๋์๋ฐฉ์
- ์น ํ์ด์ง์ ์๋ form ์ data ์ ๋ ฅ
- ์น ํ์ด์ง ๋ด action์ด ์ผ์ด๋๋ฉด ๋ฐ์ดํฐ๋ ์น ์๋ฒ๋ก ์ด๋
- ์น ์๋ฒ๋ data๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด APP ํธ์ถ . ์ด๋ APP์ ๋ฌผ๋ฆฌ์ ์ผ๋ก ๋ณ๋์ ์๋ฒ์ผ ์๋ ์์
- ํ์์ ๋ฐ๋ผ APP์ DB๋ก data๋ฅผ ์ ์ก. ์ด๋ DB๋ ๋ฌผ๋ฆฌ์ ์ผ๋ก ๋ณ๋์ ์๋ฒ์ผ ์ ์์
- DB์์ CRUD ์์ ์ด ์ผ์ด๋๊ณ ์์ ๊ฒฐ๊ณผ๋ฅผ APP์ผ๋ก, WEB์ผ๋ก ์ ์ก
- ์น์๋ฒ๋ ๋ฐ์ ๊ฒฐ๊ณผ๋ฅผ ํด๋ผ์ด์ธํธ ๋ธ๋ผ์ฐ์ ์ ์ ์ก
- ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ๋ Response ๋ฐ์ ํ์ด์ง๋ฅผ ๋ ๋๋งํ์ฌ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ค๋ค.
๊ฐ๋จํ ๋งํ๋ฉด!
form ์ ์
๋ ฅ -> submit ํ๋ฉด ๋ฐ์ดํฐ๋ ์๋ฒ๋ก ์ ์ก๋จ -> ์ ์กํ ๋ฐ์ดํฐ๋ ์น ์๋ฒ๊ฐ ์ฒ๋ฆฌ -> ์ฒ๋ฆฌ ํ ๊ฒฐ๊ณผํ๋ฉด๊ฐ์ ๋ค๋ฅธ ์นํ์ด์ง๋ฅผ ํด๋ผ์ด์ธํธ์ ์ ์ก
๐ค ์ ๊น ! CRUD ๋?
: ๋๋ถ๋ถ์ ์ปดํจํฐ ์ํํธ์จ์ด๊ฐ ๊ฐ์ง๋ ๊ธฐ๋ณธ์ ์ธ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๊ธฐ๋ฅ์ ์ผ์ปซ๋ ๋ง
๋ณดํต ๋ฐฑ์๋ ๊ฐ๋ฐ์๋ค์ด ๋ฐ์ดํฐ ๋ค๋ฃฐ๋ ์ฌ์ฉ
์ด๋ฆ : ์กฐ์ : SQL ์
- Create : ์์ฑ : Insert
- Read : ์ฝ๊ธฐ : Select
- Update : ๊ฐฑ์ : Update
- Delete : ์ญ์ : Delete
์ฌ์ฉ์ ์ธํฐํ์ด์ค๊ฐ ๊ฐ์ถฐ์ผํ ๊ธฐ๋ฅ์ ๊ฐ๋ฅดํค๋ ์ฉ์ด๋ก๋ ์ฌ์ฉ
2. form ์์ฑ
2-1. action
: ์ ๋ ฅ๊ฐ์ ์ ์กํ ํ์ด์ง
2-2. Method
: ํผ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ๋ฐฉ๋ฒ ์ ์
โญ๏ธ GET & POST
-
method ="get" ์ ๋ณด๊ฐ์ด ์ฐ๋ฆฌ ๋์ ๋ณด์
- ์น์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ ๋ ์ฌ์ฉํ๋ฉฐ, ์ฃผ์์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ๋ ๋ฐฉ์
- ์ฆ, url๋ก์ ์์ฒญ์ ๋ณด๋ธ๋ค.
- ๋ด์๊ฐ ์ ๋ณด์ ์์ด ๋ฐฉ๋ํ ๊ฒฝ์ฐ ์ง์.
์๋ฆฌ์ณ์ ๋ฐ์ดํฐ๋ฅผ ๋งํ๋ค๊ณ ์๊ฐํด๋ณด๋ฉด , ๋ด๊ฐ ์ ์ชฝ์ ์๋ ์น๊ตฌํํ ๋๋ ์ด์๋น์ด๊ณ ! ๋ฐฐ๊ณ ํ! ์๋ฆฌ์ง๋ฅด๋ฉด ๋ชฉ์ํ๊ณ ,, ๋ค ๋ค๋ฆด๊ฑฐ๊ณ ,, ์กฐ๊ธ์ ์ ๋ณด๋ฐ์ ์ฃผ์ง ๋ชปํ๋ค. ๋ผ๊ณ ์๊ฐํ๋ฉด ์ดํด ์์
-
method ="post" ๋ก ํ๋ฉด ๋์ ๋ณด์ด์ง ์์
- ๋ ธ์ถ๋๋ฉด ์๋๋ ๋ด์ฉ๋ค์ post๋ก ์ฒ๋ฆฌํด์ค๋ค
- ํ์ผ์ ์ฌ๋ฆฌ๊ฑฐ๋, ๋ณด์์ด ์น ์ํ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ๋ ์ฌ์ฉ๋จ
- ์ฃผ์์ ์ ๋ ฅ ๋ด์ฉ์ด ๋ํ๋์ง ์๊ฒ ํ๋ค (url์ด ์๋ body ๊ฐ์ผ๋ก ๋ณด๋ธ๋ค.)
- CRUD ์ ์ ์ ์์ด๋๋ฅผ ์์ฑํ๋ ๊ณณ ์ผ๋ก ๋ณด๋ด๋ ๊ฒ
- ๊ฒ์๋ฌผ ์์ฑ์ ๋๋ถ๋ถ post ๋ก ์ฒ๋ฆฌํ๋ ํธ
- ๋ฐฉ๋ํ ์ ๋ค๋ฃฐ ์ ์์
ํฌ์คํธ์์ผ๋ก ์ ๋ณด๋ฅผ ์น๊ตฌ์๊ฒ ์ ๋ฌํด์ฃผ๋ฉด ๋ง์ ๋ด์ฉ์ ์ ๋ฌํ ์ ์๊ณ , ์ํฌ๋ฆฟํ๊ฒ ์ค ์ ์๋ค! ์ด๋ ๊ฒ ์๊ฐํด๋ณด๋ฉด ์ดํด์์
๋์ ์ฐจ์ด์ ?
: Url ์ ์ ๋ ฅ๊ฐ ์ ๋ณด๊ฐ ๋จ๋์ง ์๋จ๋์ง๊ฐ ๋ค๋ฆ!
<form action="./013_form์_์๋ฆฌ.html" method="post">
<input type="text" name="userId">
<input type="password" name="userPw">
<button type="submit">Login</button>
</form>
๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ ๋ณด(์์ด๋,ํจ์ค์๋ ๋ฑ)๋ฅผ action์ ์๋ ๊ณณ์ ์ ๋ณด๋ฅผ ๋ณด๋ธ๋ค.
3. input ์์ฑ๊ณผ type
3-1. ์์ฑ
- type : text, radio ๋ฑ
- readonly : ์ฝ๊ธฐ์ ์ฉ ์ค์
- maxlength : ์ต๋ ๊ธ์ ์ ์ง์
- minlength : ์ต์ ๊ธ์ ์ ์ง์
- required : ํ์ ํ๊ทธ๋ก ์ง์ . ์ ๋ ฅํ์ง ์์ผ๋ฉด ์๋ฌ๊ฐ ๋ฌ๋ค
- autofocus : ํ์ด์ง ๋ก๋ฉ์ ์ด ์์ฑ์ ์ง์ ํ ํ๊ทธ๋ก ํฌ์ปค์ค๊ฐ ๋ฐ๋
- placeholder : ์ ๋ ฅ๊ฐ์ ๋ํ ํํธ
- name : ํ์์ ์ผ๋ก ์์ด์ผ ํจ (์๋ฒ๋ก ๋ณด๋ด์ผํ๋ key), ๊ฒน์น๊ฒ ์ํ๋๊ฒ ์ข๋ค ( ๋ฐฑ์๋์ ๋ณด๋ผ ์ ๋ณด์ด๊ธฐ ๋๋ฌธ์ ๋ฐฑ์๋๋ถ๊ณผ ์ฌ์ ์ ์ด๋ป๊ฒ ํ ์ง ํค๊ฐ์ ์ฝ์ํจ)
- value : ๋ณด๋ผ ์ ๋ณด, ๋ฐ์ดํฐ
3-2. type
type์ ์ข
๋ฅ๋ ์ด๋ฌํ๋ค. ๊ฒ๋ ๋ง์!
๊ทผ๋ฐ ์ ์ฐ๋๊ฑด์ง?
-> ๋๋ ์ ๋ ๋์ค๋ ๊ฐ์ ํค๋ณด๋๊ฐ ๋ฌ๋ผ์ง๋ค. ์ฆ ์
๋ ฅ์์์ด ๋ฌ๋ผ์ง๋ค!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<input type="text"><br>
<input type="tel"><br>
<input type="password"><br>
<input type="date"><br>
<input type="time"><br>
<input type="range"><br>
<input type="color"><br>
<input type="radio"><br> ์ ํํญ๋ชฉ ์ค ํ๋๋ง ์ ํํ ์ ์์
<input type="checkbox"><br> ์ฌ๋ฌ๊ฐ ์ ํ๊ฐ๋ฅ
<input type="file"><br>
<textarea name="name" rows="8" cols="80"></textarea>
</body>
</html>
3-3. label
input ์๋ ๋ฐ๋์ label ๊ฐ ์ค์ผํจ!
๋๊ฐ์ง ์ฌ์ฉ๋ฒ
1. label ์์ ์ธํ
์ค๋ช
๊ณผ ํผ ์
๋ ฅ ๋ชจ๋๋ฅผ ํฌํจํ๋ ๋ฐฉ์
2. label ๊ณผ input ๋ถ๋ฆฌ
ํผ ์
๋ ฅ์์ ๋ถใ
ฃํ์ฌ for ์์ฑ์ ์ด์ฉํด ๋ ์ด๋ธ ์ง์
4. <select>
& <option>
select
Dropdown ๋ฆฌ์คํธ ๋ฐ์ค ์์ฑ
option
๋ณด๊ธฐ, ์ต์
valur ๊ฐ ๋ฌด์กฐ๊ฑด ๋ฃ์ด์ค์ผํจ - post๋ก ๋ณด๋ผ ์ ๋ณด
<form action="">
<label for="myDevice">ํ์ฌ ์ฌ์ฉํ๊ณ ์๋ ์ค๋งํธํฐ์ ์ ์กฐ์ฌ๋ฅผ ์ ํํด์ฃผ์ธ์</label>
<select name="device" id="myDevice" multiple>
<!--์๋๋ multiple="multiple"์ธ๋ฐ ๋ ๊ฐ์ด ๊ฐ์ ๋ ํ๋ฒ๋ง ์ ์ด๋ ์ ์ฉ๋๋ค-->
<option value="iphone">์์ดํฐ</option>
<option value="galaxy">๊ฐค๋ญ์ํฐ</option>
<option value="ใ
ใ
">LGํฐ</option>
</select>
</form>
4-1. select ์์ฑ
- multiple : ์ฌ๋ฌ๊ฐ์ ์ต์ ์ ํ ๊ฐ๋ฅ (์ ์ ๊ฐ cmd ๋๋ฅด๊ณ ์ ํํด์ผํจ)
- selected
๋๋ ๋ถํธํ๊ณ ๊ตฌ๋ฆฐ ์คํ์ผ์ CSS๋ก ..
4-2. option ์์ฑ
- value : ์ ํ๊ฐ์ ์๋ฒ์ ์ ์ก
- selected : ๊ธฐ๋ณธ์ ์ผ๋ก ์ ํ๋์ด์๋ ๊ฐ
select
option ์ ํํ์ง ์๊ณ ์ ์กํ๋ฉด ์ฒซ๋ฒ์งธ option์value
๊ฐ์ด ์๋ฒ๋ก ๋์ด๊ฐ๊ฒ ๋๋๋ฐ ์ข์ง ์๊ฒ ์ฅฌ ..? ๊ทธ๋์ ์ฒซ๋ฒ์งธoption
์value = "0"
, ์ ํ์ผ๋ก ์ต์ ์ ๋ฃ์ด์ฃผ๋ ํธ (value ๋ฃ์ด์ฃผ๊ณ ์ถ์ง ์์ผ๋ฉดvalue = "0"
์ค๋ ๋จ)
required
๋ ๋ฃ์ด์ค์ ๊ผญ ์ ํํ๊ฒ๋ ํ๋ค!
<select name="device" id="myDevice" required>
<!--<option value="">์ ํ</option>-->
<option value="0">์ ํ</option>
<option value="iphone">์์ดํฐ</option>
<option value="galaxy">๊ฐค๋ญ์ํฐ</option>
<option value="ใ
ใ
">LGํฐ</option>
</select>
5. <fieldset>
- ๊ทธ๋ฃนํ ํ๋ ์์
- form ๋ด์ฉ์ ๊ตฌํํ
<form action="">
<fieldset>
<legend>๊ฐ์ธ์ ๋ณด</legend>
<label for="myName">์ด๋ฆ</label>
<input type="text" name="name" id="myName">
<label for="myTel">์ ํ๋ฒํธ</label>
<input type="tel" name="tel" id="myTel">
<label for="myEmail">์ด๋ฉ์ผ</label>
<input type="email" name="email" id="myEmail">
</fieldset>
<fieldset>
<legend>๊ฐ์ธ์ ๋ณด ์ ๊ณต ๋์</legend>
<label for="checkAgree">๊ฐ์ธ์ ๋ณด ์ ๊ณต์ ๋์ํ์ญ๋๊น?</label>
<input type="checkbox" name="agree" id="checkAgree">
</fieldset>
</form>
6. <legend>
filelset
๋ฐ๋ก ๋ค์ ์์นํด์ผํ๋ค !! (๋ฐ๋์ ์ฒซ๋ฒ์งธ ์์์ผ๋ก ์ฌ์ฉํด์ผ ํจ)- ํผ ๊ทธ๋ฃน์ ๋ชฉ์ ์ ๋ํ๋ด๋ ์ ๋ชฉ์ ์๋ฏธ
7. <button>
- ํด๋ฆญ๊ฐ๋ฅํ ๋ฒํผ
- ๋ฒํผ์ ๋ชจ์ต์ ๋ค์ํ๊ฒ ์ ์ดํ๊ณ ๋ฒํผ ๋ด๋ถ์ ๋ค๋ฅธ ์์ ์์๋ฅผ ์ถ๊ฐํ๊ณ ์ถ์๋ ์ฌ์ฉ
- form ์์ button ์์ผ๋ฉด enter ๋ก ์ ๊ทผ ๊ฐ๋ฅ!
7-1. button ์ type
submit
: ๋ฒํผ ํด๋ฆญํ๋ฉด ์๋ฒ๋ก ์์ ๋ฐ์ดํฐ ์ ์ถ
<button>๋ฒํผ</button>
์๋ฌด๊ฒ๋ ์ฐ์ง ์์ผ๋ฉด ๊ธฐ๋ณธ๊ฐ์ด submit
์ด๋ค.
<button type="submit">๋ฒํผ</button>
๊ทธ๋ ๋ค๊ณ type ์๋ตํ์ง ๋ง๊ธฐ
โญ๏ธ Input vs button ๋ฌด์์ ์จ์ผํ ๊น?
๋ ๋ค submit ๊ธฐ๋ฅ์ ํ๋๊ฒ ๋๊ฐ์๋ฐ ๋ ์ค ๋ญ ์จ์ผํ ๊น?
<input>
์ ๋ซ๋ ํ๊ทธ๊ฐ ์๊ธฐ ๋๋ฌธ์ยvalue
ย ํน์ฑ์ ํ ์คํธ ๊ฐ ๋ฐ์ ์ง์ ํ ์ ์๋ค.<button>
์ ๋ด๋ถ์ ์ฌ๋ฌ๊ฐ์ง ์์ ์ปจํ ์ธ ๋ฅผ ์ถ๊ฐํ ์ ์๊ณ ์ฌ๊ธฐ ๋ํดย::after
์ย::before
ย ์ ๊ฐ์ ๊ฐ์ ์์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค.
๋ ๋ค์ฑ๋กญ๊ณ ๋ฉ์ง ์คํ์ผ์ ์ ์ฉํด์ผ ํ๋ค๋ฉด <button>
์์๋ฅผ ์ฐ์ ์ ์ผ๋ก ๊ณ ๋ คํ๋ฉด ๋๋ค!
8. <textarea>
: ์ฌ๋ฌ์ค์ ํ
์คํธ ์
๋ ฅ๋ฐ์ ์ ์๋ ์์
์ด๊ฒ๋ ๋น์ฐํ ๋ฐ์ดํฐ์ ์ก์ ์ํด ์ฌ์ฉ๋จ
<textarea name="" id="" cols="30" rows="10"></textarea>
- cols ์ด : ์
๋ ฅ์ฐฝ์ ๋์ด, ๋ฌธ์์ ํ๊ท ์ ์ธ ๋์ด๋ฅผ ๊ธฐ์ค์ผ๋ก ํจ. ๊ทธ๋์ ํฐํธ๋ง๋ค ๋ค๋ฅด๋ค! ๋ณดํต ์ด๊ฑธ๋ก ์ค์ ์ํ๊ณ CSS๋ก ์ฒ๋ฆฌํ๋ ํธ
(๊ธฐ๋ณธ๊ฐ = 20) - rows ํ : ์ ๋ ฅ์ฐฝ ์ธ๋ก์ค ์
9. <datalist>
: <select>
์ <input>
์ ์์ด์ ์ฌ์ฉํ ์ ์๋๋กํฉ๋๋ค. <input>
์ list ์์ฑ์ ์ด์ฉํด <datalist>
์์์ id ์์ฑ๊ณผ ์ฐ๊ฒฐํ์ฌ ์ฌ์ฉ
<label for="solasystem">์ํ๋ ํ์ฑ์ ์ ํํ์ธ์ : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
<option value="์์ฑ">์์ฑ</option>
<option value="๊ธ์ฑ">๊ธ์ฑ</option>
<option value="์ง๊ตฌ">์ง๊ตฌ</option>
<option value="ํ์ฑ">ํ์ฑ</option>
</datalist>
์ด๋ ๊ฒ ์ฌ์ฉ์์๊ฒ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ํํ ์ ์๋ ์ต์
์ ์ ๊ณตํจ๊ณผ ๋์์, ๋ง์ฝ ์ด ์์ ์ฌ์ฉ์๊ฐ ์ ํํ ์ ์๋ ์ต์
์ด ์๋ ๊ฒฝ์ฐ์ _์ง์ ์
๋ ฅ ๊ฐ๋ฅํ๊ฒ๋ ํธ์์ฑ ์ ๊ณตํ๋ค._
(์ด๋ฏธ์ง/๋ด์ฉ ์ฐธ๊ณ ๋ฐ ์ถ์ฒ : ๋ฉ์์ด์ฌ์์ฒ๋ผ)
๋ณด์ถฉ์ค๋ช
shadow DOM
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([CodeLion] 03. HTML (Forms) ๐ฆ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ewaterbin/CodeLion-02.-HTML-3์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค