WebUI/HTML5

[HTML5 ๊ธฐ์ดˆ] HTML ๊ธฐ๋ณธ ํƒœ๊ทธ ๋ชจ์Œ II

gangintheremark 2023. 7. 7. 13:48
728x90
๐ŸŽˆ์ฐธ๊ณ . HTML ํƒœ๊ทธ์™€ ์„ค๋ช…

1.1 ํผ ์‚ฝ์ž…

<form> ์†์„ฑ๋“ค

  • method : ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๋‚ด์šฉ์„ URL์— ํฌํ•จํ•˜์—ฌ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋Š” get๊ณผ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญ ๋ณธ๋ฌธ์— ํฌํ•จํ•˜์—ฌ ์ „์†กํ•ด URL์— ๋ฐ์ดํ„ฐ๊ฐ€ ๋…ธ์ถœ๋˜์ง€ ์•Š๋Š” post
  • name : ํผ์˜ ์ด๋ฆ„
  • action : ํผ ํƒœ๊ทธ ์•ˆ์˜ ๋‚ด์šฉ์„ ์ฒ˜๋ฆฌํ•ด ์ค„ ์„œ๋ฒ„ ํ”„๋กœ๊ทธ๋žจ
  • target : action ์†์„ฑ์—์„œ ์ง€์ •ํ•œ ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋‹ค๋ฅธ ์ฐฝ์—์„œ ์—ด๋„๋ก
  • autocomplete : ์ž๋™ ์™„์„ฑ ๊ธฐ๋Šฅ (๊ธฐ๋ณธ๊ฐ’ on)
<form [์†์„ฑ="์†์„ฑ๊ฐ’"]> </form>
  • <fieldset> <legend>: ํ•˜๋‚˜์˜ ํผ ์•ˆ์—์„œ ์—ฌ๋Ÿฌ ๊ตฌ์—ญ์„ ๋‚˜๋ˆ„์–ด ํ‘œ์‹œํ•  ๋•Œ
  • <labe> : ํผ ์š”์†Œ์™€ ๋ ˆ์ด๋ธ” ํ…์ŠคํŠธ๊ฐ€ ์„œ๋กœ ์—ฐ๊ฒฐ๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ ์ˆ˜ ์žˆ์Œ
<label for="user-id">์•„์ด๋‹ค</label><input type="text" id="user-id">

1.2 input ํƒœ๊ทธ

<input> ํƒœ๊ทธ์˜ type ์†์„ฑ

  • text - value maxlength size
  • password - value maxlength size
  • search
  • url
  • email
  • tel
  • checkbox - value checked
  • radio - value checked name
  • number - min max step value
  • range - min max step value
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local
  • submit - value
  • reset - value
  • image - src alt
  • button - value onclick
  • file
  • hidden : ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์ด์ง€ ์•Š์ง€๋งŒ ์„œ๋ฒ„๋กœ ๋„˜๊ฒจ์ฃผ๋Š” ๊ฐ’์ด ์žˆ๋Š” ํ•„๋“œ

<input>์˜ ๋‹ค๋ฅธ ์ฃผ์š” ์†์„ฑ

  • autofocus
  • placeholder
  • readonly
  • required

1.3 ์ด์™ธ์˜ ์ฃผ์š” ํƒœ๊ทธ๋“ค

  • <textarea> - rows cols
  • <select> - size multiple
    • <option> - value selected
  • <datalist>
    • <option> - value
  • <button> - type="submit" type="reset" type="button"

 

728x90