๐Ÿ’œ HTML,CSS

HTML&CSS 5์ผ์ฐจ(์ •๋ฆฌx)

Genie_. 2024. 3. 23. 21:52
728x90
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ํผ</title>
</head>
<body>
  <!-- formํƒœ๊ทธ๋Š” ์„œ๋ฒ„์™€ ์—ฐ๊ณ„ํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ์ด๋‹ค !!์•„์ฃผ ์ค‘์š”!!
  action : form ๋‚ด์šฉ์„ ์ „์†กํ•  ์ „์†ก์ฒ˜๋ฅผ ์ •ํ•จ
    => 1) name์ด ๋‹ฌ๋ฆฐ value ๊ฐ’์„ ์ „์†กํ•˜๊ฒŒ ๋œ๋‹ค.
    => 2) action์ด ์—†์œผ๋ฉด ๋‚ด ํŽ˜์ด์ง€๋กœ ๋ณด๋‚ธ๋‹ค (๊ทธ๋ž˜์„œ ๋ฆฌ๋กœ๋”ฉ๋œ๋‹ค)
    => 3) ์ „์†ก ๋ฐ›์€ ํŽ˜์ด์ง€๋Š” ์ „์†ก๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์–ด๋–ค ์ผ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค

  method : form์„ ์ „์†กํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •ํ•จ
    => GET : ์ „์†กํ•˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ URL์— ํ‘œ์‹œ๋œ๋‹ค (๊ธฐ๋ณธ ๊ฐ’)
    => GET๋ฐฉ์‹์—์„œ๋Š” ? ๋’ค์— X=Y ํ˜•์‹์œผ๋กœ ์ „์†ก๋œ ๊ฐ’์ด ํ‘œ์‹œ๋œ๋‹ค
    => ์—ฌ๋Ÿฌ ๊ฐ’์ด ์žˆ๋”ฐ๋ฉด & ๋กœ ๊ตฌ๋ถ„๋˜์–ด์„œ ํ‘œ์‹œ๋œ๋‹ค.
    => url์— ์ ํžŒ ๊ฐ’์€ ์ˆซ์žํ˜•ํƒœ๋ผ๊ณ  ํ•ด๋„ ์‚ฌ์‹ค์€ ๋ฌธ์ž๋กœ ํŒ๋‹จ๋œ๋‹ค.
    => ? ๋’ค์— ๋ถ™์€ ๊ฐ’๋“ค์„ ์ด์นญํ•˜์—ฌ 'ํŒŒ๋ผ๋ฏธํ„ฐ' ๋ผ๊ณ  ํ•œ๋‹ค
    => ์˜ˆ) www.naver.com?x=123&y=test / ํŒŒ๋ผ๋ฏธํ„ฐ 2๊ฐœ
    => post : ์ „์†กํ•˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋ˆˆ์— ์•ˆ๋ณด์ž„, ๋Œ€์‹  Networkํƒญ์—์„œ๋Š” ๋‹ค ๋ณด์ž„
    => ์‚ฌ์šฉ์ž์—๊ฒŒ ๋…ธ์ถœํ•˜๋ฉด ์•ˆ๋˜๋Š” ์ค‘์š” ํŒŒ๋ผ๋ฏธํ„ฐ๋Š” post๋ฐฉ์‹์œผ๋กœ ๋ณด๋‚ด์•ผํ•œ๋‹ค

  enctype : form์„ ์ „์†กํ•˜๋Š” ๋ฐ์ดํ„ฐ ํ˜•์‹์œผ๋กœ ์ •ํ•จ
  ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฌด์กฐ๊ฑด name ์†์„ฑ์ด ํ•„์š”ํ•˜๋‹ค
  -->

  <!-- ์ „์†ก == submit -->
  <!-- button : form ์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์‹œ ๋ˆ„๋ฅด๋ฉด ์ „์†ก์ด ๋˜๋ฒ„๋ฆผ (๊ธฐ๋ณธ ๋Šฅ๋ ฅ) -->

  <form action="240313_Input.html" method="post">
    <fieldset> <!-- ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์ฃผ๋Š” ์šฉ๋„ (์ง„์งœ ๊ทธ๋ƒฅ ๋ฌถ๋Š”๊ฑฐ ) -->
      <legend>์ด ๋ถ€๋ถ„ ์ œ๋ชฉ</legend>
      <span>์ด๊ฑด ์ „์†ก์•ˆ๋จ</span> <br>
      <input type="text" name="id" value="python">
      <input type="password" name="pw" value="java">
      <input type="text" name="secret" value="my-secret" hidden>
      <!-- ๋œฏ์„๋ ค๊ณ  ๋ง˜๋จน์œผ๋ฉด ๋‹ค ๋œฏ์„ ์ˆ˜ ์žˆ์–ด์„œ ์ค‘์š”ํ•œ ๋‚ด์šฉ์€ ์ ˆ๋Œ€ xxx -->
      <input type="text">
      <input type="range"> <br>
      <button type="button">๋‹จ์ˆœ ๋ฒ„ํŠผ(๋ˆŒ๋Ÿฌ๋„ ์•„๋ฌด๊ฒƒ๋„ ์•ˆ๋จ)</button> <br>
      <button type="submit">์ „์†ก(submit)</button> <br>
      <button type="reset">๋‹จ์ˆœ ๋ฒ„ํŠผ(ํ˜„์žฌ form์˜ input data ๋‹ค ์—†์• ๋ผ)</button> <br>
      <input type="button" value="๋‹จ์ˆœ๋ฒ„ํŠผ">
      <input type="submit" value="์ „์†ก(submit)">
    </fieldset>
  </form>





</body>
</html>

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€