๐Ÿงฉ ๊ธฐ๋ก์ž ๊ผฌ๋น„์˜ ํ†ต์ œ ๋ฃจํ‹ด

IT/HTML&CSS

[HTML] form ์–‘์‹ํผ ๋งŒ๋“ค๊ธฐ(2021-09-09)

๊ธฐ๋ก์ž ๊ผฌ๋น„ 2021. 11. 9. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>form-์–‘์‹ํผ</title>
  </head>
  <body>
    <!-- class๋„ ํƒœ๊ทธ์— ์ด๋ฆ„์„ ์ง€์–ด์ฃผ๋Š” ์†์„ฑ id๋ž‘ ๊ฐ™๋‹ค. ๋‘ ๊ฐœ์˜ ์ฐจ์ด๋Š” id๋Š” ์ค‘๋ณตํ•  ์ˆ˜ ์—†๊ณ , class๋Š” ์ค‘๋ณตํ•  ์ˆ˜ ์žˆ๋‹ค.
    ์ „์ฒด ์Šคํƒ€์ผ ์ค‘์— class๋Š” ๋‹ค๋ฅธ ์Šคํƒ€์ผ์„ ์ฃผ๊ธฐ์œ„ํ•ด์„œ ์‚ฌ์šฉ = class๋Š” ํŠน์ • ์ด๋ฆ„์„ ์ค˜์„œ ํŠน์ •ํ•œ ์Šคํƒ€์ผ์„ ์ค„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. -->
    <form>
      <!-- ์ž…๋ ฅํ•˜๋Š” ์ •๋ณด๋ฅผ ์˜์—ญ ๋‹จ์œ„๋กœ ๋‚˜๋ˆ ์ค„ ๋•Œ ์“ฐ๋Š” ํƒœ๊ทธ : filedset -->
      <fieldset>
        <legend>๊ณ„์ •์ •๋ณด</legend>
        <!-- ๋ณด์—ฌ์ค„ ์ปจํ…์ธ ๊ฐ€ ์—†์œผ๋ฉด ํ™€ํƒœ๊ทธ๋ฅผ ์“ด๋‹ค(input ํƒœ๊ทธ๋Š” ๋ณด์—ฌ์ฃผ๋Š” ์ •๋ณด๊ฐ€ ์—†๊ณ  ์ •๋ณด๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธฐ๋Šฅ์˜ ํƒœ๊ทธ์ด๋ฏ€๋กœ..) -->
        <!-- label ํƒœ๊ทธ๋Š” ์ด๋ฆ„ํ‘œ ํƒœ๊ทธ๋กœ ๋ผ๋ฒจ ์ด๋ฆ„์„ ํด๋ฆญํ•˜๋ฉด ์ž…๋ ฅ์ฐฝ์ด ๊นœ๋นก์ธ๋‹ค. label ํƒœ๊ทธ์—๋Š” for์ด๋ผ๋Š” ์†์„ฑ, input ํƒœ๊ทธ์—๋Š” id ์†์„ฑ์„ ๋„ฃ์–ด์„œ ์„œ๋กœ ์—ฐ๊ฒฐํ•œ๋‹ค. laber ํƒœ๊ทธ๊ฐ€ input ๋ณด๋‹ค ๋จผ์ € ์ž‘์„ฑ๋˜์–ด์•ผ ํ•œ๋‹ค.(์ขŒ์—์„œ ์šฐ)-->
        <label for="userid">์•„์ด๋”” :</label>
        <input id="userid" type="text" placeholder="์•„์ด๋””๋Š” 7~9 ์˜๋ฌธ์ž">
        <br>
        <label for="userpw">๋น„๋ฐ€๋ฒˆํ˜ธ :</label>
        <input id="userpw" type="password" placeholder="6์ž ์ด์ƒ ํŠน์ˆ˜๋ฌธ์ž ํฌํ•จ">
      </fieldset>
      <fieldset>
        <legend>ํšŒ์›์ •๋ณด</legend>
        <label for="username">์ด๋ฆ„ :</label>
        <input type="text" id="username">
        <br>
        <label for="usernumber">์ „ํ™”๋ฒˆํ˜ธ :</label>
        <!-- ์ฒซ๋ฒˆ์งธ input ํƒœ๊ทธ์—๋งŒ id๋ฅผ ์ ์–ด์„œ label ์†์„ฑ๊ณผ ์—ฐ๊ฒฐํ•ด์ฃผ๊ณ , 2๋ฒˆ์งธ ์ดํ›„์˜ input ํƒœ๊ทธ์—๋Š” id๋ฅผ ๋”ฐ๋กœ ์ ์ง€ ์•Š์•„๋„ ๋จ -->
        <input type="number" id="usernumber">-
        <input type="number">-
        <input type="number">
        <br>
        <!-- bํƒœ๊ทธ ์ฒ˜๋Ÿผ ๋งฅ๋ฝ์— ์•„๋ฌด ์ƒ๊ด€์—†์ด ๋“ค์–ด๊ฐ€๋Š” ํƒœ๊ทธ์ธ๋ฐ ๊ฑฐ๊ธฐ์— ์Šคํƒ€์ผ(๊ฐ•์กฐ, ๊ธฐ์šธ๊ธฐ ๋“ฑ)๋„ ์•ˆ๋“ค์–ด ๊ฐ„ ํƒœ๊ทธ๊ฐ€ span ํƒœ๊ทธ!-->
        <span>์ˆ˜์‹  ๋ฐฉ๋ฒ•</span>
        <!-- name ์†์„ฑ์€ ๋ณดํ†ต ๊ฐœ๋ฐœ์ž๋“ค์ด ์“ฐ๋Š” ์†์„ฑ์ด์ง€๋งŒ, ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‘˜ ์ค‘์— ํ•˜๋‚˜๋งŒ ์„ ํƒํ•˜๋„๋ก ๋งŒ๋“œ๋Š” ๊ฑด ํ•ด๋ณด์ž. data๋Š” ๋„ค์ž„์ด ๊ฐ™์€ ๊ฒŒ ๋„˜์–ด๊ฐˆ ์ˆ˜ ์—†์Œ. -->
        <input type="radio" id="useremail" name="rcv">
        <label for="useremail">์ด๋ฉ”์ผ</label>
        <input type="radio" id="usersns" name="rcv">
        <label for="usersns">SNS</label>
        <label><input type="radio" id="usermail" name="rcv">
        <label for="usermail">์šฐํŽธ</label>
      </fieldset>
      <fieldset>
        <legend>๊ธฐํƒ€์ •๋ณด</legend>
        <span>์ทจ๋ฏธ</span>
        <input type="checkbox" id="like1">
        <label for="like1">์˜ํ™”๋ณด๊ธฐ</label>
        <input type="checkbox" id="like2">
        <label for="like2">๊ฒŒ์ž„ํ•˜๊ธฐ</label>
        <input type="checkbox" id="like3">
        <label for="like3">์‚ฐ์ฑ…ํ•˜๊ธฐ</label>
        <br>
        <label><input type="checkbox">๋งˆ์ผ€ํŒ…์ •๋ณด ์ˆ˜์‹  ๋™์˜(์„ ํƒ)<label>
        <br>
        <!-- ์ฃผ์†Œ์™€ ์„ ํƒ๋ฐ•์Šค๋ฅผ ์—ฐ๊ฒฐ ์‹œํ‚ค๋ ค๋ฉด id์™€ for๊ฐ’์„ ์—ฐ๊ฒฐํ•˜๋ฉด ๋œ๋‹ค. -->
        <label for="useraddr">์ฃผ์†Œ</label>
        <!-- size๋Š” ๋ช‡๊ฐœ์”ฉ ๋ณด์ด๋Š”์ง€ ํ‘œ์‹œํ•˜๋Š” ์†์„ฑ์ด๊ณ , multiple์€ ์—ฌ๋Ÿฌ ์˜ต์…˜ ์„ ํƒ ๊ฐ€๋Šฅ์„ ์˜๋ฏธ -->
        <select size="1" id="useraddr" multiple>
          <option>์„œ์šธ</option>
          <option>๊ฒฝ๊ธฐ</option>
          <option>์ถฉ์ฒญ</option>
          <option>์ „๋ผ</option>
          <option>๊ฒฝ์ƒ</option>
          <option>๊ฐ•์›</option>
        </select>
        <input type="text" placeholder="์ž์„ธํ•œ ์ฃผ์†Œ๋ฅผ ์ ์–ด์ฃผ์„ธ์š”">
        <br>
        <label for="userpr">์ž๊ธฐ์†Œ๊ฐœ</label>
        <!--์žฅ๋ฌธ์„ ์ž…๋ ฅํ•  ๋•Œ ์“ฐ๋Š” ํƒœ๊ทธ : textarea /์ œ๋ชฉ์ด๋‚˜ ๋‚ ์งœ ๋“ฑ ์“ฐ๋Š” ๊ฒƒ์€ input ํƒœ๊ทธ๋ฅผ ์“ฐ๊ณ  ๊ธด ๋ณธ๋ฌธ(์žฅ๋ฌธ)์„ ์ž…๋ ฅํ•  ๋•Œ๋Š” textarea !
        textarea๋Š” ๊ฐ€์ด๋“œ ๊ธ€์„ ์“ธ ์ˆ˜ ์žˆ์–ด์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์Œํƒœ๊ทธ์ž„-->
        <textarea id="userpr" name="introduction" rows="8" cols="80">์ž๊ธฐ์†Œ๊ฐœ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์‹œ๋ฉด ๊ณ ๋ง™๊ฒ ์Šต๋‹ˆ๋‹ค.</textarea>
      </fieldset>
      <input type="submit" value="ํšŒ์›๊ฐ€์ž…">
      <!-- value๋ผ๋Š” ์†์„ฑ์„ ๋„ฃ์–ด์„œ ๋ฒ„ํŠผ ์•ˆ์˜ ์ด๋ฆ„์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Œ -->
      <input type="reset" value="๋‹ค์‹œ์ž‘์„ฑ">
    </form>
    <h3>id์™€ for ๊ฐ’์„ ๋„ฃ์–ด์„œ laber ํƒœ๊ทธ์™€ input ํƒœ๊ทธ๋ฅผ ์„œ๋กœ ์—ฐ๊ฒฐ์‹œ์ผœ์ฃผ๋Š” ๊ฒŒ ํฌ์ธํŠธ</h3>
  </body>
</html>
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'IT > HTML&CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML] ์˜ˆ์ œํ’€๊ธฐ(2021-09-14)  (0) 2021.11.09
[HTML] div ์˜์—ญ ๋‚˜๋ˆ„๊ธฐ_์˜ˆ์ œ๋งŒ๋“ค๊ธฐ(2021-09-10)  (0) 2021.11.09
[html] ๋‚˜๋ฌด์œ„ํ‚ค_์˜ˆ์ œ(HTML ๋งŒ๋“ค๊ธฐ)_๊ธฐ์ดˆ(2021-09-07)  (0) 2021.11.09
[HTML] ๋‚ด๋ถ€์Šคํƒ€์ผ์‹œํŠธ๋ฐฉ์‹_๊ธฐ์ดˆ(2021-08-31)  (1) 2021.11.08
[HTML] ์ธ๋ผ์ธ์Šคํƒ€์ผ_๊ธฐ์ดˆ(2021-08-31)  (0) 2021.11.08

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”