HTML_form과 input

Adrian·2022년 1월 21일
post-thumbnail

▶️ form은 form 태그로 만든다.

  <form>
    <input>
  </form>

인풋태그는 닫지 않는다.


▶️ input의 type

  <input type="text">
  <input type="email">
  <input type="password">
  <input type="radio">
  <input type="file">
  <input type="checkbox">
  <input type="submit">
  <select>
    <option>옵션1</option>
  </select>
  <textarea></textarea>

가장 자주쓰는 태그이며, 나머지 type은 구글링으로 찾아보면서 사용하도록 하자.


▶️ input에 넣는 속성들

  <input placeholder="어쩌구" value="어쩌구" name="age">
  <form>
    <button type="submit">전송</button>
    <input type="submit">
  </form>
  1. placeholder는 배경 글자, value는 미리 입력된 값, name은 서버 기능개발에 필요한 인풋의 이름을 설정 가능합니다.
  2. 전송버튼은 type을 submit으로 지정해준다.

▶️ HTML 속성으로 CSS셀렉터 사용하기

   input[type=email] {
   color : grey
  }

input의 특정한 type 속성 요소만 찾아서 스타일을 줄 수 있다. 폼에서 특히 유용하게 쓰인다.


▶️ label 태그와 for 속성

  <input type="checkbox" id="subscribe">
  <label for="subscribe">누르기</label>

label과 for 속성을 적절히 활용하면 input대신 label을 눌러도 input을 선택할 수 있다.

profile
관조, 사유, 끈기

0개의 댓글