TIL 4. HTML의 여러가지 태그 #2(Form(1))

이번에는 html 태그 중 form과 관련된 내용을 중심으로 알아보겠습니다.

form: 사용자로부터 input을 받기 위한 태그

     (함께 사용하는 속성 action="API주소", method="GET|POST")

input: 데이터를 받을 때 사용하는 태그(input field). 속성 type 기입 필요

• input 주요 속성
  -. type: input의 여러가지 유형(text, email, password, url, number, file)
  -. placeholder: input칸 안에 내용 표시
  -. maxlength: input칸의 최대 글자수 지정
  -. minlength: input칸의 최소 글자수 지정
  -. required: 무조건 입력하도록 지정
  -. value: 초기값 설정
  -. min: 최소값 지정
  -. max: 최대값 지정
  -. accept: 허용하는 확장자 지정(.jpg .png 등)

<form action="" method="GET">
<input type="text" placeholder="이름을 입력하세요" minlength="5" maxlength="13" />
<input type="number" placeholder="나이" min="5" max="100" />
<input type="password" placeholder="비밀번호를 입력하세요" minlength="5" maxlength="13" />
  <button>
    submit
  </button>
  </form>

submit

input의 radio&checkbox 속성: 여러항목 중 선택하기 위한 속성(radio는 한개, checkbox는 다중 선택)

• name을 사용하여 한 그룹으로 연결해주어야 한 항목만 선택됨
• value를 사용하여 선택된 항목을 서버로 전송

radio 사용

<form action="" method="GET">
  <input type="radio" name="subscription" value="subscribed" id="subscribed" />
  <label for="subscribed"> 구독중 </label>
  <input type="radio" name="subscription" value="unsubscribed" id="unsubscribed" />
  <label for="unsubscribed"> 미구독 </label>
    <button type="submit">
      submit
    </button>
  </form>

구독중 미구독 submit

checkbox 사용

  <h3>
  내 취미
  </h3>
   <form>
    <input type="checkbox" name="hobby" value="running" id="running" />
    <label for="running">달리기</label>
    <input type="checkbox" name="hobby" value="reading" id="reading" />
    <label for="reading">독서</label>
    <input type="checkbox" name="hobby" value="basketball" id="basketball" />
    <label for="basketball">농구</label>
     <button type="submit">
       submit
     </button>
  </form>

내 취미

달리기 독서 농구 submit