๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- HTML,css,Javascript

6. HTML ํผ ํƒœ๊ทธ

by Wonit 2019. 11. 29.

ํผ(form)

์›น์—์„œ๋Š” ์‚ฌ์šฉ์ž์— ๋Œ€ํ•œ ์›น ์„œ๋ฒ„์˜ ์ผ๋ฐฉํ–ฅ์  ์ •๋ณด ์ „๋‹ฌ ๋ฟ ์•„๋‹ˆ๋ผ ์‚ฌ์šฉ์ž์™€ ์›น ์„œ๋ฒ„๊ฐ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์•„์•ผ ํ•œ๋‹ค. ์ด๋Ÿฌํ•œ ์–‘๋ฐฉํ–ฅ์  ํŠน์„ฑ์„ ์œ„ํ•ด <form> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

ํผ ํƒœ๊ทธ์˜ ์‚ฌ์šฉ

ํผ ํƒœ๊ทธ

HTML ๋ฌธ์„œ์—์„œ ํผ์„ ํ†ตํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๋ฐ์ดํ„ฐ๋ฅผ ์›น ์„œ๋ฒ„๋กœ ์ „์†กํ•œ๋‹ค. <form> ํƒœ๊ทธ ์•ˆ์— ๋˜๋‹ค๋ฅธ <form>ํƒœ๊ทธ๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.

  • action : ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•  ํ”„๋กœ๊ทธ๋žจ์˜ rul

  • method : ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์— ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•

    • get : query string์ด ๊ทธ๋Œ€๋กœ url์— ๋‚˜ํƒ€๋‚˜๋ฉฐ ๋ฐ์ดํ„ฐ ์–‘์ด ์ œํ•œ๋˜๊ณ  ๋…ธ์ถœ๋œ๋‹ค.

    • post : message body์— ํฌํ•จ์‹œ์ผœ ์„œ๋ฒ„์—๊ฒŒ ์ „๋‹ฌ๋˜๋ฉฐ ์–‘์˜ ์ œํ•œ์ด ์—†์œผ๋ฉฐ ๋ฐ์ดํ„ฐ๊ฐ€ ๋…ธ์ถœ๋˜์ง€ ์•Š๋Š”๋‹ค.

  • encrypte : "application/x-www-form-urlencoded(๊ธฐ๋ณธ) | multipart/form-data | text/plain" post ๋ฐฉ์‹์—์„œ ์ „์†ก ์ธ์ฝ”๋”ฉ ํ˜•์‹

  • target : ๋ฐ์ดํ„ฐ์˜ ์ฒ˜๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ํ‘œ์‹œํ•  ์žฅ์†Œ

  • accept-charset : ํผ ์ด๋ฆ„

  • name="ํผ ์ด๋ฆ„"

์ž…๋ ฅ ํƒœ๊ทธ

<form> ํƒœ๊ทธ ๋‚ด์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ๋ฅผ ์ •์˜ํ•˜๊ธฐ ์œ„ํ•ด input ํƒœ๊ทธ๊ฐ€ ์‚ฌ์šฉ๋œ๋‹ค.

**input ํƒœ๊ทธ์˜ ์†์„ฑ

  • type="ํ˜•์‹"

    ์ž…๋ ฅ ์š”์†Œ์˜ ํ˜•์‹

    • text
    • password
    • checkbox
    • radio
    • hidden
    • image
    • button
    • submit
    • reset
  • name="์ด๋ฆ„"

    ์ž…๋ ฅ ์š”์†Œ์˜ ์ด๋ฆ„

    • submit๊ณผ reset ์„ ์ œ์™ธํ•œ ๋ชจ๋“  type์˜ ํ•„์ˆ˜ ์š”์†Œ
  • value="๊ฐ’"

    ์ž…๋ ฅ ์š”์†Œ์˜ ์ด๋ฆ„

    • text, password :
    • checkbox, radio
    • submit, reset
  • size="๋ฌธ์ž ์ˆ˜"

    ์ž…๋ ฅ ์š”์†Œ์˜ ์ด๋ฆ„

    • text, password ์ž…๋ ฅ ํ•„๋“œ์˜ ํฌ๊ธฐ (๊ธฐ๋ณธ ์˜๋ฌธ์ž 20)
  • chected="checkted"

    ์ž…๋ ฅ ์š”์†Œ์˜ ์ด๋ฆ„

    • checkbox, radio์˜ ๊ธฐ๋ณธ ๊ฐ’
  • maxlength="๋ฌธ์ž ์ˆ˜"

    ์ž…๋ ฅ ์š”์†Œ์˜ ์ด๋ฆ„

    • text, password ์—์„œ ์ž…๋ ฅ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์ตœ๋Œ€ ๋ฌธ์ž ์ˆ˜

์„ ํƒ ํƒœ๊ทธ

๋“œ๋กญ๋‹ค์šด ๋ฆฌ์ŠคํŠธ(drop down list) ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ <form> ํƒœ๊ทธ ์•ˆ์—์„œ ์‚ฌ์šฉํ•œ๋‹ค. ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ•ญ๋ชฉ๋“ค์„ ๋™์‹œ์— ์„ ํƒํ•  ๊ฒฝ์šฐ๋Š” multiple ์˜ต์„ ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

<select name="์ด๋ฆ„" size="๋ชฉ๋ก ์ฐฝ์— ๋ณด์ด๋Š” ํ•ญ๋ชฉ์˜ ์ˆ˜" [multiple]>
  <option> ํ•ญ๋ชฉ </option>
</select>

ํ…์ŠคํŠธ ์˜์—ญ ํƒœ๊ทธ

ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ์ „์†กํ•  ๊ฒฝ์šฐ ์‚ฌ์šฉ๋˜๋ฉฐ <form> ์š”์†Œ ๋‚ด์—์„œ <textarea>ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ๋‹ค์Œ๊ณผ ๊ฐ™์€์†์„ฑ์„ ๊ฐ–๋Š”๋‹ค.

<textarea [์†์„ฑ]> ~ </textarea>
  • name="์ด๋ฆ„" : ํ…์ŠคํŠธ ์˜์—ญ์˜ ์ด๋ฆ„
  • rows="ํ–‰์˜ ์ˆ˜" : ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œ๋˜๋Š” ํ–‰์˜ ์ˆ˜ (๊ธฐ๋ณธ 2)
  • cols="์—ด์˜ ์ˆ˜" : ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œ๋˜๋Š” ์—ด์˜ ์ˆ˜ (๊ธฐ๋ณธ ์˜๋ฌธ์ž 20)

๋Œ“๊ธ€