[HTML/CSS] Day4. Forms (1) ๐
Forms ๐
์ฐ๋ฆฌ๋ ์ธํฐ๋ท์ ์ฌ์ฉํ๋ฉด์ ๋ง์ ๋ก๊ทธ์ธ๊ณผ ํ์๊ฐ์
์ ํ๋ค. ๋ง์ ํฌํธ ์ฌ์ดํธ ๋ฟ๋ง ์๋๋ผ ์จ๋ผ์ธ ์ผํ๋ชฐ ๋ฑ์์ ๋ง์ด๋ค. ๋ง์ ๋ก๊ทธ์ธ๊ณผ ํ์๊ฐ์
์ ๊ณผ์ ์ค์ ์ด์ ์ฐ๋ฆฌ๊ฐ ๋ฐฐ์ฐ๋ form
๊ณผ ๊ด๋ จ๋ ํ๊ทธ๋ค์ด ์๋ค. ํ๋์ฉ ์ดํด๋ณด๋๋ก ํ์!
<Form>
์ ๊ธฐ๋ณธ ์์ฑ
<form>
์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๋ณด๋ฅผ ์
๋ ฅํ๋ ์์ญ์ ๊ฐ๋ฆฌํค๋ ํ๊ทธ์ด๋ค. <form>
์ ์
๋ ฅ์ ํ๊ณ ์ ์ถํ๊ฒ ๋๋ฉด ๋ฐ์ดํฐ๊ฐ ์๋ฒ๋ก ์ ์ก์ด ๋๊ณ ์ ์ก๋ ๋ฐ์ดํฐ๋ ์น ์๋ฒ๊ฐ ์ฒ๋ฆฌํ๋ฉฐ ์ฒ๋ฆฌ ํ ๋ก๊ทธ์ธ ๊ฒฐ๊ณผ ํ๋ฉด ๊ฐ์ ๋ค๋ฅธ ์น ํ์ด์ง๋ฅผ ํด๋ผ์ด์ธํธ์ ์ ์กํ๋ค.
<form>
์ ๋์๋ฐฉ์ โ๏ธ
- ์น ํ์ด์ง์ ์๋ form์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅ
- ์น ํ์ด์ง ๋ด ์ก์ ์ด ์ผ์ด๋๊ฒ ๋๋ฉด ๋ฐ์ดํฐ๋ ์น ์๋ฒ๋ก ์ด๋
- ์น ์๋ฒ๋ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด APP์ ํธ์ถ
- ํ์์ ๋ฐ๋ผ APP์ DB๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ก
3-4๋ฒ์ ๊ณผ์ ์์ APP๊ณผ DB๋ ๋ฌผ๋ฆฌ์ ์ธ ๋ณ๋์ ์๋ฒ์ผ ์๋ ์์
- DB์์ CRUD ์์
์ด ์ผ์ด๋๊ณ ์์
๊ฒฐ๊ณผ๋ฅผ APP์ผ๋ก, WEB์ผ๋ก ์ ์ก
CRUD = Create(์์ฑ), Read(์ฝ๊ธฐ), Update(๊ฐฑ์ ), Delete(์ญ์ )
๋ฅผ ์๋ฏธ - ์น ์๋ฒ๋ ๋ฐ์ ๊ฒฐ๊ณผ๋ฅผ Client ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ์ก
- ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ๋ Response ๋ฐ์ ํ์ด์ง๋ฅผ ๋ ๋๋งํ์ฌ ์ฌ์ฉ์์๊ฒ ์ถ๋ ฅํ์ฌ ๋ณด์ฌ์ค
<form>
์ ์์ฑ
<form>
ํ๊ทธ๋ action
์ method
์์ฑ์ ๊ฐ์ง๋ค.
<form action="" method="get">
<input type="text" name="userId">
<input type="password" name="userPw">
<button type="submit">๋ก๊ทธ์ธ</button>
</form>
action
: ์ ๋ ฅ ๊ฐ์ ์ ์กํ ํ์ด์ง๋ฅผ ๋ํ๋, ์์ฑ๊ฐ์ด ๋น ๊ฐ์ด๋ฉด ํ์ฌ ๋ฌธ์๊ฐ ์ ์ก๋ฐ๊ฒ ๋๋ค.method
:<form>
์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ๋ฐฉ๋ฒ์ ์ ์ํ๋ ์์ฑ, ์์ฑ๊ฐ์ผ๋ก๋get
๊ณผpost
๊ฐ ์๋ค.get
์ ์น ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ ๋ ์ฌ์ฉํ๋ฉฐ, ์ฃผ์(URL)์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ๋ ๋ฐฉ์์ด๊ณ ,post
๋ ํ์ผ์ ์ฌ๋ฆฌ๊ฑฐ๋, ๋ณด์์ด ํ์ํ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ๋ ๋ฑ ์ฌ์ฉํ๋ค.
๊ฐ๋จํ๊ฒ ๋งํ์๋ฉด,
์ฌ์ฉ์๊ฐ ์
๋ ฅํ ์ ๋ณด(method
๋ฅผ ํตํด ์ป์ ๋ฐ์ดํฐ)๋ฅผ action์ ์๋ ๊ณณ์ ์ ๋ณด๋ฅผ ๋ณด๋ด๋ ๊ฒ!
http://127.0.0.1:5500/form.html?userId=jj134&userPw=123
์์ ์ฃผ์์์ ?userId=jj134&userPw=123
๊ฐ ์ ์กํ ๋ฐ์ดํฐ์ธ๋ฐ, ์์ฒ๋ผ ์ฃผ์(URL)์ ์ฟผ๋ฆฌ ์คํธ๋ง์ผ๋ก ์ถ๊ฐ๋๋ค. ์ฃผ์ํ ์ ์ get
์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ๊ฒฝ์ฐ ์ฃผ์์ ๋ฐ์ดํฐ๊ฐ ๋ค ๋ณด์ด๊ธฐ ๋๋ฌธ์ ๋ณด์์ด ํ์ํ ๋ฐ์ดํฐ๋ ์ ๋ ์ ์กํ์ง ์๋๋ก ํ๋ค.
๊ทธ์ ๋ฐํด post
๋ ๋ฐ์ดํฐ๋ฅผ ์ ์กํด๋ ์ฃผ์์ ๋ฐ์ดํฐ๊ฐ ๋ณด์ด์ง ์๊ฒ ํ๋ค. ๊ทธ๋์ ๋ณด์์ ๋ฏผ๊ฐํ ๋ฐ์ดํฐ๋ค์ ์ ์กํ ๋ ์ฌ์ฉํ๋ค.
<input>
โน๏ธ
<input>
์ ์ฌ์ฉ์๊ฐ ๋ค์ํ๊ฒ ํผ ํ๊ทธ์ ์
๋ ฅํ ์ ์๋ ๊ณต๊ฐ์ ๋ง๋ค์ด ์ฃผ๊ณ , ์ฌ์ฉ์์๊ฒ ์ ๋ณด๋ฅผ ์
๋ ฅ์ ๋ฐ๋๋ค. ๋ํ ์ฌ์ฉ์๊ฐ ์
๋ ฅํ๋ ์ ๋ณด๋ '๊ฐ์ธ์ ๋ณด'์ด๊ธฐ ๋๋ฌธ์ method
์ ๊ฐ์ post
๋ก ํ๋ค.
๊ทธ๋ฆฌ๊ณ <input>
์ type
์์ฑ์ ๋ฌด์กฐ๊ฑด "ํ๋์ ํ์
"๋ง ๊ฐ์ง๋ค. ๋ ๊ฐ์ ํ์
์ ๊ฐ์ง ์ ์๋ค.
<form action="" method="post">
<!-- text : ํ
์คํธ๋ฅผ ์
๋ ฅํ๋ input ํ๊ทธ -->
<input type="text" name="userId"><br>
<!-- password : ํจ์ค์๋๋ฅผ ์
๋ ฅํ๋ input ํ๊ทธ, ์
๋ ฅํ ๊ฐ์ ๊ธฐํธ๋ก ๋ํ๋(๋ง์คํฌ์ฒ๋ฆฌ) -->
<input type="password" name="userPw"><br>
<!-- search : ๊ฒ์ํ ์ ์๋ input ํ๊ทธ -->
<input type="search" name="searchInput"><br>
<!-- checkbox : 0๊ฐ ์ด์์ ๋ณด๊ธฐ๋ฅผ ์ ํํ ์ ์๋ input ํ๊ทธ -->
<input type="checkbox" name="" id=""><br>
<!-- radio : ๋ณด๊ธฐ ์ค ํ๋๋ง ์ ํ ๊ฐ๋ฅํ input ํ๊ทธ -->
<!-- ๋ณด๊ธฐ๊ฐ ์ฌ๋ฌ๊ฐ์ผ ๊ฒฝ์ฐ name์์ฑ์ ๊ฐ์ ์ผ์น ์ํค๋ฉด ํ๋๋ง ์ ํ ๊ฐ๋ฅ -->
<input type="radio" name="์ฑ๋ณ" id="male">
<label for="male">๋จ</label>
<input type="radio" name="์ฑ๋ณ" id="female">
<label for="female">์ฌ</label><br>
<!-- color : ์ปฌ๋ฌ ํผ์ปค๋ฅผ ํตํด ์์ ์ ํํ๋ input ํ๊ทธ -->
<input type="color" name="" id=""><br>
<!-- date : ๋ ์ง๋ฅผ ์
๋ ฅํ๋ input ํ๊ทธ -->
<input type="date" name="" id=""><br>
<!-- time : ์๊ฐ๋ฅผ ์
๋ ฅํ๋ input ํ๊ทธ -->
<input type="time" name="" id=""><br>
<!-- email : ์ด๋ฉ์ผ์ ์
๋ ฅํ๋ input ํ๊ทธ -->
<input type="email" name="" id=""><br>
<!-- hidden : ๋ณด์ด์ง ์์ง๋ง ์
๋ ฅ๋ ๊ฐ์ ๋ฐ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ ์กํ๋๋ฐ ์ฃผ๋ก ์ฌ์ฉํจ -->
<input type="hidden" name=""><br>
<!-- range : ์ฌ๋ผ์ด๋ ๋ฐ ํ์์ input ํ๊ทธ -->
<input type="range" name="" id=""><br>
<!-- number : ์๋ฅผ ์ ํํ ์ ์๊ฒ ํ๋ input ํ๊ทธ -->
<input type="number" name="" id=""><br>
<!-- url : ์นํ์ด์ง ์ฃผ์๋ฅผ ์
๋ ฅํ๊ฒ ํ๋ input ํ๊ทธ -->
<input type="url" name="" id=""><br>
<!-- tel : ์ ํ๋ฒํธ๋ฅผ ์
๋ ฅํ๋ input ํ๊ทธ -->
<input type="tel" name="" id=""><br>
<!-- file : ํ์ผ์ ์
๋ก๋ํ ์ ์๋ input ํ๊ทธ -->
<input type="file" name="" id=""><br>
<!---->
<button type="submit">๋ก๊ทธ์ธ</button><br>
</form>
<input>
๊ณผ ํจ๊ป ์ฐ์ด๋ <label>
๐
<input>
ํ๊ทธ๋ฅผ ์ค๋ช
ํ๊ธฐ ์ํด ๋ค๋ฅธ ํ
์คํธ ํ๊ทธ๋ฅผ ๋ถ์ฌ ์ค๋ช
ํ ์ ์๋ค. ํ์ง๋ง ์น์ ๊ทผ์ฑ์ ์ํด <label>
์ ์ฌ์ฉํด ์๊ฐ ์ฅ์ ์ธ๋ค๋ ํผ์ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ์๋ฉํฑํ ํ๊ทธ์ด๋ค.
<label>
์ ์์ฑ
<label>
์ ํน์ดํ๊ฒ ํ๋ฉด์ ์ถ๋ ฅ๋๋ <label>
์ ์ฝํ
์ธ ๋ง ํด๋ฆญํด๋ <input>
ํด๋ฆญ ์์ญ์ด ๋์ด์ง๊ธฐ ๋๋ฌธ์ ํฌ์ปค์ค๊ฐ <input>
์ผ๋ก ํฌ์ปค์ค์ ์ปค์๊ฐ ์ด๋ํ๋ค. ์ด๋ฅผ ์ํด์ ์์ฑ์ธ for
๋ก <input>
๊ณผ ์ฐ๊ฒฐ(?)ํด์ผํ๋๋ฐ ํ๋ฒ ๋ณด๋๋ก ํ์!
<input type="radio" name="์ฑ๋ณ" id="male">
<label for="male">๋จ</label>
<input type="radio" name="์ฑ๋ณ" id="female">
<label for="female">์ฌ</label><br>
์์ ์ด๋ฏธ์ง์์ ๋ณด์ด๋ ์ฝํ
์ธ "๋จ"๊ณผ "์ฌ"๊ฐ ๊ฐ๊ฐ์ radio
ํ์
์ <input>
์ ์ฐ๊ฒฐํ๋ค.
์ฐ๊ฒฐ ๋ฐฉ๋ฒ์ ์ฐ๊ฒฐํ <input>
์ id
์ <label>
์ for
์ ๊ฐ์ด ์ผ์นํด์ผ ์ฐ๊ฒฐ์ด ๋๋ค.
ํ์ง๋ง ์ด ์์ฑ์ ์ฌ์ฉํ์ง ์๊ณ ๋ ์ ์ฉ์ํฌ ์ ์๋ค.
<label>
์ด๋ฆ :
<input type="text" name="name">
</label>
<label>
์์ <input>
์ ์์ ์์๋ก ๋ฃ๋ ๊ฒ์ด๋ค.
ํ์ง๋ง ๋๋ <label>
์ for
๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ์ ํธํด์ ์ ์์ฒ๋ผ ์ฌ์ฉํ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([HTML/CSS] Day4. Forms (1) ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@untiring_dev/HTMLCSS-Day4.-Forms์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค