HTML #7-1 - Form Tag (1)

ennakoidaยท2023๋…„ 5์›” 29์ผ
0

HTML

๋ชฉ๋ก ๋ณด๊ธฐ
7/8

๐Ÿ“ Form Tag

ํผ ํƒœ๊ทธ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, ํƒœ๊ทธ ๋‚ด์—์„œ ์–ด๋–ค ๊ณณ์œผ๋กœ ๋ณด๋‚ผ์ง€, ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ๋ณด๋‚ผ์ง€ ์ ์–ด์ฃผ์—ฌ์•ผ ํ•œ๋‹ค.

form, input, placeholder

<h1>์ฒซ๋ฒˆ์งธ ํผ(form, input)</h1>
<!-- action -> url-->
<!-- form ํƒœ๊ทธ๋Š” action๊ณผ method๊ฐ€ ํ•„์ˆ˜ -->
<form action="/member/login.do" method="get">
    ID : <input type="text" placeholder="์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”"><br>
    PW : <input type="password" placeholder="๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”"><br>
    <input type="submit" value="๋กœ๊ทธ์ธ">
    <input type="reset" value="์ทจ์†Œ">
</form>

ํผ ํƒœ๊ทธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ <form> ํƒœ๊ทธ ์•„๋ž˜์— <input> ํƒœ๊ทธ๋ฅผ ์ ๋Š” ๊ตฌ์„ฑ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.
<form>ํƒœ๊ทธ๋Š” action๊ณผ method ์†์„ฑ์„ ํ•„์ˆ˜๋กœ ๊ฐ€์ ธ์•ผ ํ•œ๋‹ค. (๊ด€๋ จ ์„ค๋ช…์€ ์•„๋ž˜์—์„œ ํ•œ๋‹ค.)
ํผ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด์„œ๋Š” <input> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. <input> ํƒœ๊ทธ์—๋Š” ๋‹ค์–‘ํ•œ type=""์ด ์กด์žฌํ•˜๊ณ , ์ด type์œผ๋กœ ํ˜•์‹์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”. ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”. ์™€ ๊ฐ™์ด ๋น„์–ด์žˆ๋Š” ์ž…๋ ฅ์ฐฝ์„ ๊พธ๋ฉฐ์ฃผ๋Š” ์†์„ฑ์€ placeholder="" ์ด๋‹ค.

๐Ÿ’ก input type

  • text : ๊ฐ€์žฅ ํ‰๋ฒ”ํ•œ input type์œผ๋กœ, ๋ชจ๋“  text๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค.
  • password : ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” type์œผ๋กœ, text์™€ ๋‹ค๋ฅด๊ฒŒ *๋‚˜ โ€ข๋กœ ํ‘œํ˜„ํ•œ๋‹ค.
  • submit : ํผ์„ ์ œ์ถœํ•˜๋Š” ๋ฒ„ํŠผ์ด๋‹ค. value ๊ฐ’์œผ๋กœ ๋ฒ„ํŠผ์— ๊ธ€์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.
  • reset : ํผ์„ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๋ฒ„ํŠผ์ด๋‹ค. value ๊ฐ’์œผ๋กœ ๋ฒ„ํŠผ์— ๊ธ€์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

action, method, name

<!-- method : get -> ๊ฐ’์ด ๋‹ค ๋ณด์ž„ / post -> ๊ฐ’์ด ์•ˆ๋ณด์ž„ -->
<!--
    method ๋ฐฉ์‹
    1. get : url ์— ์ž…๋ ฅํ•œ ๊ฐ’์ด ๋ณด์ž„. ๋ณด์ด๊ฒŒ ๋ณด๋ƒ„
    2. post : ์•ˆ๋ณด์ด๊ฒŒ ๋ณด๋ƒ„(1์ฐจ์ ์œผ๋กœ)
-->
<form action="/member/login.do", method="post">
    <fieldset>
        <!-- ํผ ํƒœ๊ทธ ํ…Œ๋‘๋ฆฌ -->
        <legend>๋กœ๊ทธ์ธ ์ •๋ณด</legend>
        <!-- input์— name ์จ์ฃผ๊ธฐ -->
        ID : <input type="text" name="user-id"><br>
        PW : <input type="password" name="user-pw"><br>
        <input type="submit" value="๋กœ๊ทธ์ธ">
        <input type="reset" value="์ทจ์†Œ">
    </fieldset>
</form>

<fieldset> ์š”์†Œ๋Š” ํผ์˜ ์—ฌ๋Ÿฌ ์ปจํŠธ๋กค๊ณผ <label>์„ ๊ทธ๋ฃน์œผ๋กœ ๋ฌถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
<legend>๋Š” ๋ฌถ์€ ํผ ํƒœ๊ทธ๋“ค์„ ํ•˜๋‚˜์˜ ํ…Œ๋‘๋ฆฌ๋กœ ๊ฐ์‹ธ, ์ด๋ฆ„์„ ์ง€์ •ํ•˜์—ฌ ๋ณด์—ฌ์ค€๋‹ค.
์œ„์˜ ์‚ฌ์ง„์€ placeholder๊ฐ€ ์—†์–ด ๋ฌธ๊ตฌ๊ฐ€ ์ ํ˜€์žˆ์ง€ ์•Š๋‹ค.

๐Ÿ“Œ method="get"

method="get"์€ ์ „์†ก๋œ url์— ์ž์‹ ์ด ์ž…๋ ฅํ•œ ๊ฐ’์ด ๋‹ค ๋ณด์ด๋„๋ก ๋ณด๋‚ด๋Š” ๋ฐฉ์‹์ด๋‹ค. ๋”ฐ๋ผ์„œ ์œ„์ฒ˜๋Ÿผ id๋ž‘ pw๋ฅผ get ๋ฐฉ์‹์œผ๋กœ ๋ณด๋‚ด๋Š” ๊ฑด ์ข‹์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“Œ method="post"

๋ฐ˜๋ฉด method="post"๋Š” ์ž…๋ ฅํ•œ ๊ฐ’์ด (1์ฐจ์ ์œผ๋กœ๋Š”) ๋ณด์ด์ง€ ์•Š๋„๋ก ๋ณด๋‚ด๋Š” ๋ฐฉ์‹์ด๋‹ค.


html5 ์†์„ฑ

<form action="์–ด๋Š ๊ณณ์œผ๋กœ(url)" method="์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ">
    text : <input type="text" name="user-id"><br>
    password : <input type="password" name="user-pw"><br>
    submit : <input type="submit" value="์ œ์ถœ"><br>
    reset : <input type="reset" value="์ดˆ๊ธฐํ™”">
    <hr>

    <!-- checkbox : ์ค‘๋ณต์„ ํƒ / radio : ๋‹จ์ผ์„ ํƒ (name๊ฐ’์„ ๋งž์ถฐ์ค˜์•ผํ•จ) -->
    checkbox : <input type="checkbox">HTML5
    <input type="checkbox">CSS3
    <input type="checkbox">Javascript
    <input type="checkbox">jQuery <br>
    radio button : <input type="radio" name="gender">๋‚จ
    <input type="radio" name="gender">์—ฌ <br>
    button : <input type="button" value="BUTTON"> <br>
    <hr>

    file : <input type="file"> <br> <!-- ํŒŒ์ผ ์ฒจ๋ถ€ -->
    hidden : <input type="hidden"> <br> <!-- ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๋ณด์ด์ง€ ์•Š๋Š”, ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’ -->
    date : <input type="date"> <br>
    datetime : <input type="datetime-local" > <br> <!-- date + ์‹œ๊ฐ„๊นŒ์ง€ ํ‘œํ˜„ -->
    number : <input type="number" max="10" min="5"> <br>
    search : <input type="search"> <br>
    email : <input type="email"><br> <!-- ์ด๋ฉ”์ผ ํ˜•์‹ @ ํ™•์ธ -->
    range : <input type="range" max="10" min ="0" value="7"> <br>
    week : <input type="week"> <br>
    textarea : <textarea rows="5" cols="30"></textarea> <br>
</form>

๐Ÿ’ก input type

  • checkbox : ์ค‘๋ณต ์„ ํƒ์ด ๊ฐ€๋Šฅํ•˜๋‹ค(โ–ก)
  • radio : ์ค‘๋ณต ์„ ํƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค(โ—‹)
  • file : ํŒŒ์ผ ์„ ํƒ ๋ฒ„ํŠผ์„ ํ†ตํ•ด ํŒŒ์ผ ์ฒจ๋ถ€๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • date : ์—ฐ๋„-์›”-์ผ
  • datetime-local : date + ์‹œ๊ฐ„
  • number : ์ˆซ์ž๋ฅผ ์กฐ์ ˆํ•˜๋Š” ๋ฐ”๊ฐ€ ์ƒ๊ธด๋‹ค. max์™€ min๊ฐ’์„ ์ง€์ •ํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.
  • email : ์ด๋ฉ”์ผ์˜ ํ˜•์‹์„ ์ง€์ผœ์•ผ ํ•œ๋‹ค(@). ํ˜•์‹์„ ์ง€ํ‚ค์ง€ ์•Š์œผ๋ฉด ์ด๋ฉ”์ผ ์ฃผ์†Œ์— @๋ฅผ ํฌํ•จํ•ด๋‹ฌ๋ผ๋Š” ์ฃผ์˜๋ฌธ๊ตฌ๊ฐ€ ๋œจ๊ฒŒ ๋œ๋‹ค.
  • textarea : ๋ฉ€ํ‹ฐ๋ผ์ธ ์ผ๋ฐ˜ ํ…์ŠคํŠธ ํŽธ์ง‘ ์ปจํŠธ๋กค์ด๋‹ค. rows์™€ cols๋กœ ์˜์—ญ์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€