HTML #7-2 - Form Tag (2)

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

HTML

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

๐Ÿ“ Form Tag

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

checkbox

<form>
    <fieldset>
        <legend>์ข‹์•„ํ•˜๋Š” ์Œ์‹(๋‹ค์ค‘์„ ํƒ)</legend>
        <!-- label์„ ๋‹ฌ์•„์ฃผ๋ฉด checkbox ํด๋ฆญ ์‹œ, ์•„์ด์ฝ˜์ด ์•„๋‹Œ text๋ฅผ ํด๋ฆญํ•ด๋„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค. -->
        <label>
            <input type="checkbox">ํ”ผ์ž
        </label>
        <label>
            <input type="checkbox" checked="true">์น˜ํ‚จ
        </label>
        <!-- 
            css๋ฅผ ๊ฐœ๋ณ„ ์ ์šฉํ•ด์•ผํ•ด์„œ ์œ„์˜ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜์ง€ ๋ชปํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. 
            ๊ทธ๋Ÿด๋•Œ๋Š” label๋กœ ๋จผ์ € ๊ฐ์‹ผ ํ›„, input์— id๊ฐ’์„ ์ค˜์„œ for๋กœ ์—ฐ๊ฒฐ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. 
        -->
        <input type="checkbox" id="dbk">
        <label for="dbk">๋–ก๋ณถ์ด</label>
        <input type="checkbox" id="mrt">
        <label for="mrt">๋งˆ๋ผํƒ•</label>
        <label>
            <input type="checkbox">์ˆœ๋Œ€
        </label>
    </fieldset>
</form>

<checkbox>๋Š” ๋‹ค์ค‘ ์„ ํƒ์ด ๊ฐ€๋Šฅํ•œ ์„ ํƒ ์ƒ์ž๋กœ, ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ๊ฐํ˜•์˜ ๋ชจ์–‘์„ ๊ฐ–๋Š”๋‹ค.

<checkbox>์˜ ์ฒดํฌ ์ƒ์ž๊ฐ€ ์•„๋‹Œ ๊ธ€์”จ๋ฅผ ์„ ํƒํ•ด๋„ ์ƒ์ž๊ฐ€ ์„ ํƒ๋˜๋„๋ก ํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” ๊ฐ <input type="checkbox">๋ฅผ <label> ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.


radio

<form>
    <fieldset>
        <legend>์ทจ๋ฏธ์ƒํ™œ</legend>
        <!-- radio์˜ ์ค‘๋ณต์„ ํƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋™์ผํ•œ name๊ฐ’์„ ์ค€๋‹ค. -->
        <label>
            <input type="radio" name="hobby">์ฝ”๋”ฉ
        </label>
        <label>
            <input type="radio" name="hobby">์œ ํŠœ๋ธŒ
        </label>
        <input type="radio" name="hobby" id="netflix"><label for="netflix">๋„ทํ”Œ๋ฆญ์Šค</label>
        <input type="radio" name="hobby" id="lol"><label for="lol">๋กค</label>
        <input type="radio" name="hobby" id="golf"><label for="golf">๊ณจํ”„</label>
    </fieldset>
</form>

<radio> ๋ฒ„ํŠผ์€ ๋‹จ์ผ ์„ ํƒ์„ ์œ„ํ•œ ๋ฒ„ํŠผ์ด๋‹ค.

๋‹จ์ผ ์„ ํƒ์ด ๋™์ž‘ํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” <input type="radio"> ๋’ค์— ๊ฐ™์€ name="" ์†์„ฑ์„ ์ฃผ์–ด์•ผ ํ•œ๋‹ค. ์œ„์˜ ์˜ˆ์ œ๋Š” ๊ฐ™์€ name="hobby"๋ฅผ ์ฃผ์–ด ์ค‘๋ณต ์„ ํƒ์„ ๋ฐฉ์ง€ํ•˜์˜€๋‹ค.


required

<form action="/member/login.do" method="post">
    <!-- required (์œ ํšจ์„ฑ ๊ฒ€์‚ฌ) : ๊ฐ’์ด ์ž…๋ ฅ๋˜์ง€ ์•Š์•˜์„ ๋•Œ, ์ „์†ก์„ ์‹œํ‚ค์ง€ ์•Š๊ณ , ๊ฒฝ๊ณ ๋ฌธ์„ ๋ณด์—ฌ์คŒ -->
    ID : <input type="text" name="user-id" placeholder="์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”" required><br>
    PW : <input type="password" name="user-pw" placeholder="๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”"><br>
    <input type="submit" value="์ „์†ก">
</form>

required ์†์„ฑ์€ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ํ•ด์ค€๋‹ค.
์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ž€, ์„œ๋ฒ„์— ์ œ์ถœํ•˜๊ธฐ ์ „, ๋ฐ˜๋“œ์‹œ ์ฑ„์›Œ์ ธ ์žˆ์–ด์•ผ ํ•˜๋Š” ํ•„์ˆ˜ ์ •๋ณด, ํ•„์ˆ˜ ํ˜•์‹์„ ๋ช…์‹œํ•œ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ’์ด ์ž…๋ ฅ๋˜์ง€ ์•Š์•˜์„ ๋•Œ, ์ „์†ก์„ ์‹œํ‚ค์ง€ ์•Š๊ณ  ์ž…๋ ฅ๋ž€์„ ์ž‘์„ฑํ•˜๋ผ๋Š” ๊ฒฝ๊ณ ๋ฌธ์„ ๋ณด์—ฌ์ค€๋‹ค.
๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๋“ฑ์— ๋งŽ์ด ์“ฐ์ธ๋‹ค.


select

<form action="" method="">
    <fieldset>
        <legend>๊ฐ€์žฅ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๊ณผ๋ชฉ์€?</legend>
        <select name="subject">
            <!-- <option>์ž๋ฐ”</option> -->
            <!-- optgroup์„ ์‚ฌ์šฉํ•˜๋ฉด select์•ˆ์— ํฐ ๋ถ„๋ฅ˜๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค. -->
            <optgroup label="์ž๋ฐ”">
                <option value="capsulation">์บก์Šํ™”</option>
                <option value="inheritance">์ƒ์†</option>
                <option value="polymorphism">๋‹คํ˜•์„ฑ</option>
            </optgroup>
            <optgroup label="๊ทธ์™ธ">
                <option value="oracle">์˜ค๋ผํด</option>
                <option value="front-end">ํ”„๋ก ํŠธ์—”๋“œ</option>
                <option value="back-end">๋ฐฑ์—”๋“œ</option>
            </optgroup>
        </select>
    </fieldset>
</form>

<select>๋Š” ์˜ต์…˜ ๋ฉ”๋‰ด๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ปจํŠธ๋กค์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.
<option>์œผ๋กœ ๊ฐ ์˜ต์…˜์„ ๋‚˜์—ดํ•  ์ˆ˜ ์žˆ๊ณ , <optgroup>์„ ์‚ฌ์šฉํ•˜๋ฉด option์„ ๋ฌถ์–ด ๋ถ„๋ฆฌ๋œ ๊ทธ๋ฃน์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.


๊ฒ€์ƒ‰์œผ๋กœ ์„ ํƒํ•˜๊ธฐ

<form action="/member/login.do" method="post">
    <fieldset>
        <legend>์ข‹์•„ํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์„ ํƒํ•˜์„ธ์š”</legend>
        <!-- ๊ฒ€์ƒ‰์€ input text๋กœ ์‚ฌ์šฉํ•˜๊ณ , select๋Š” datalist๋กœ ๋Œ€์ฒดํ•ด์„œ ์‚ฌ์šฉ -->
        <input type="text" list="browsers">
        <datalist id="browsers"> <!-- id์™€ list ๊ฐ’์„ ๋งž์ถฐ์ค€๋‹ค. -->
            <option>Edge</option>
            <option>Chorme</option>
            <option>Whale</option>
            <option>Safari</option>
            <option>Brave</option>
        </datalist>
    </fieldset>
</form>

๊ฒ€์ƒ‰์ฐฝ์œผ๋กœ๋Š” <input type="text">๋ฅผ ์ฃผ๊ณ , <select> ๋Œ€์‹  <datalist>๋กœ <option>์„ ๋ฌถ์œผ๋ฉด ๊ฒ€์ƒ‰์œผ๋กœ ์„ ํƒํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.
<input>์— list="" ์†์„ฑ์„ ์ฃผ๊ณ , ๊ฐ™์€ ์†์„ฑ๊ฐ’์„ <datalist>์˜ id="" ์†์„ฑ ๊ฐ’์œผ๋กœ ๋„ฃ์–ด ์—ฐ๊ฒฐํ•ด ์ฃผ๋ฉด ๋œ๋‹ค.

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