Byeonguk Kim

안녕하세요. 29살의 조금은 늦은 나이로 새롭게 개발자로 시작하는 신입 개발자입니다. 포트폴리오 [https://deaguowl.github.io]

HTML 03. form, input, label

15 Apr 2019 » HTML

2019.04.15 Python and Django Full Stack Web Developer Bootcamp

(스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

  1. html에서 테이블 만드는 tag

form

  1. class : by css 연결고리
  2. action : 특정 사이트를 링크 해놓으면 submit을 하였을 때 해당 링크로 이동
  3. method : javascript와 결합하여 행동
  4. form은 입력된 데이터를 한번에 서버로 전송한다.
  5. 따라서 함께 input 받아서 전송할 데이터들은 form으로 묶는다.

input (무언가를 쓸 수 있게 해준다.)

  1. type : text / email / password / submit / color / radio
    1. 이메일타임은 @ 혹은 .com을 쓸 수 있다.
    2. 자동적으로 이메일 타입인지 확인할 수 있다.
    3. password는 자동적으로 별표처리가 된다.
    4. submit은 보낼 수 있게 해준다.
    5. text를 해서 쓰는 것만큼 크기를
    6. radio는 동그라미 버튼이 나온다.
      1. radio에서도 value값을 넣어줘야지 이게 값이 나중에 전달되어 쓸 수 있다.
      2. loc 라고 해놓으면 radio 박스에서 하나만 선택할 수 있게 해준다
      3. 단 name에 같은 loc 라고 해주어야지 서로 인식할 수 있다.
  2. name : 딱히 표현은 되지 않으나 나중에 name을 value와 함께 전달한다.
    1. 나중에 참조할 때 쓸 수 있다.
  3. value : 초기값
    1. 자동적으로 처음에 값을 넣어준다.
    2. 사용자가 값을 바꿀 수 있다.
    3. placeholder로 투명하게 보이게 할 수도 있다.
  4. required를 통해 꼭 넣어야 하는 것을 설정해줄 수 있다.
  5. 정말 잘 정리해놓은 자료: HTML : 폼(form) 이해

label tag

  1. input에 email을 넣고 submit을 누르면 주소창이
    1. file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?useremail=gang0406%40naver.com 이렇게 변한다.
  2. input에 text를 넣고 submit을 하면
    1. file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?userinput=mystuff 제일 마지막이 이렇게 변한다.
  3. submit버튼을 눌렀을 때 무언가 엑션을 주고 싶을 때
    1. form action = “ 주소 “ method = “get” 근데 딱히 method는 적지 않아도 가긴하네?
    2. https://fabl1106.github.io/?userinput=HELLO+WORLD
    3. 다른 페이지로 가면서 내가 입력한 것을 가지고 있다.
  4. label
    1. 텍스트와 문구를 한개로 라벨 해준다.
    2. 텍스트박스와 문구가 한줄에 같이 생기게 해준다.
    3. label for = “특정 문구” 를 해놓으면 input에서 id를 통해 연결 시킬 수 있다.
    4. 활용 방법 * <label for =”hello”> 이메일을 입력해주세요</label> * <input id = “hello” type = “email” name=”” placeholder=”@gmail.com” required>
  5. select
    1. 무언가를 순차적으로 고르게 하는 것을 만들 수 있다.
    2. option와 함께 사용
  6. textarea
    1. 문장으로 된 feedback을 적을 수 있도록 해준다.

Test 03

test03

구현

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Assessment Test HTML LEVEL</title>
  </head>
  <body>
    <h1>Course Sign Up Page</h1>
    <p>please Note : Frist, Last Name, Password, and Email are required</p>
    <form class="" action="/Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/thankyou.html" method="get">
      <label for="First">First Name:</label>
      <input id="First" type="text" name="" placeholder="First Name" required>
      <label for="Last">Last Name:</label>
      <input id="Last" type="text" name="" placeholder="Last Name" required>
      <p>
        <label for="Email">Email:</label>
        <input id ="Email" type="email" name="" placeholder="name@email.com" required>
        <label for="Password">Password</label>
        <input id = "Password" type="password" name="" value="" required>
      </p>
      <p>Are you over the age of 18?</p>
      <label for="Yes">Yes:</label>
      <input id = "Yes" type="radio" name="loc" value="Yes">
      <label for="No">No:</label>
      <input id = "No" type="radio" name="loc" value="No">
      <p>Do you have a Credit Card or PayPal?</p>
      <select class="" name="">
        <option value="Credit">Credit Card</option>
        <option value="PayPal">PayPal</option>
      </select>
      <p>Do you have any Feedback?</p>
      <textarea name="name" rows="8" cols="80"></textarea>
      <p><input type="submit" name="" value="Submit Feedback"></p>
    </form>

  </body>
</html>
  • 위에서는 아직 채워넣지 않았지만 각각의 tag에 대해 name 부분과 value 부분은 중요하다. name과 value가 합쳐져서 데이터베이스로 넘어간다.

Related Posts