[HTML/CSS] Day4. Forms (1) ๐Ÿ“

Forms ๐Ÿ“„

์šฐ๋ฆฌ๋Š” ์ธํ„ฐ๋„ท์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋งŽ์€ ๋กœ๊ทธ์ธ๊ณผ ํšŒ์›๊ฐ€์ž…์„ ํ•œ๋‹ค. ๋งŽ์€ ํฌํ„ธ ์‚ฌ์ดํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์˜จ๋ผ์ธ ์‡ผํ•‘๋ชฐ ๋“ฑ์—์„œ ๋ง์ด๋‹ค. ๋งŽ์€ ๋กœ๊ทธ์ธ๊ณผ ํšŒ์›๊ฐ€์ž…์˜ ๊ณผ์ • ์ค‘์— ์ด์ œ ์šฐ๋ฆฌ๊ฐ€ ๋ฐฐ์šฐ๋Š” form๊ณผ ๊ด€๋ จ๋œ ํƒœ๊ทธ๋“ค์ด ์žˆ๋‹ค. ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž!

<Form>์˜ ๊ธฐ๋ณธ ์†์„ฑ

<form>์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๋Š” ์˜์—ญ์„ ๊ฐ€๋ฆฌํ‚ค๋Š” ํƒœ๊ทธ์ด๋‹ค. <form>์— ์ž…๋ ฅ์„ ํ•˜๊ณ  ์ œ์ถœํ•˜๊ฒŒ ๋˜๋ฉด ๋ฐ์ดํ„ฐ๊ฐ€ ์„œ๋ฒ„๋กœ ์ „์†ก์ด ๋˜๊ณ  ์ „์†ก๋œ ๋ฐ์ดํ„ฐ๋Š” ์›น ์„œ๋ฒ„๊ฐ€ ์ฒ˜๋ฆฌํ•˜๋ฉฐ ์ฒ˜๋ฆฌ ํ›„ ๋กœ๊ทธ์ธ ๊ฒฐ๊ณผ ํ™”๋ฉด ๊ฐ™์€ ๋‹ค๋ฅธ ์›น ํŽ˜์ด์ง€๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์ „์†กํ•œ๋‹ค.

<form>์˜ ๋™์ž‘๋ฐฉ์‹ โš™๏ธ

  1. ์›น ํŽ˜์ด์ง€์— ์žˆ๋Š” form์— ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅ
  2. ์›น ํŽ˜์ด์ง€ ๋‚ด ์•ก์…˜์ด ์ผ์–ด๋‚˜๊ฒŒ ๋˜๋ฉด ๋ฐ์ดํ„ฐ๋Š” ์›น ์„œ๋ฒ„๋กœ ์ด๋™
  3. ์›น ์„œ๋ฒ„๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด APP์„ ํ˜ธ์ถœ
  4. ํ•„์š”์— ๋”ฐ๋ผ APP์€ DB๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†ก
    3-4๋ฒˆ์˜ ๊ณผ์ •์—์„œ APP๊ณผ DB๋Š” ๋ฌผ๋ฆฌ์ ์ธ ๋ณ„๋„์˜ ์„œ๋ฒ„์ผ ์ˆ˜๋„ ์žˆ์Œ
  5. DB์—์„œ CRUD ์ž‘์—…์ด ์ผ์–ด๋‚˜๊ณ  ์ž‘์—… ๊ฒฐ๊ณผ๋ฅผ APP์œผ๋กœ, WEB์œผ๋กœ ์ „์†ก
    CRUD = Create(์ƒ์„ฑ), Read(์ฝ๊ธฐ), Update(๊ฐฑ์‹ ), Delete(์‚ญ์ œ)๋ฅผ ์˜๋ฏธ
  6. ์›น ์„œ๋ฒ„๋Š” ๋ฐ›์€ ๊ฒฐ๊ณผ๋ฅผ Client ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์ „์†ก
  7. ์‚ฌ์šฉ์ž ๋ธŒ๋ผ์šฐ์ €๋Š” 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๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ด์„œ ์ „์ž์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•œ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ