[html] input type & select

sireal·2024년 2월 15일
0

Frontend

목록 보기
3/15

문법 (input type)

--> form 태그 : 사용자와 프로그램 사이에 소통할 ㅅ ㅜ있는 태그 (가장 많이 사용!)

  • type="text"일때

    • maxlength : 입력할 수 있는 최대 글자수
    • disabled : 비활성화
    • readonly : disabled 는 아예 클릭도 못하게 비활성화인데, readonly 는 클릭은 되지만 텍스트 입력이 X
    • value : 값을 입력 가능
    • placeholder : 아예 만들어진 속성

  • type="password" 일때
    • 입력을 보여주지 않는 비밀번호 태크
      ex)
      <input type="password"/>

  • type="radio" 일때
    • 선택에 따른 입력
    • 여러개의 선택사항 중에서 하나만 입력하도록 할때 주로 사용

ex)
<input type="radio"/> 남자 / <input type="radio"/> 여자

--> 두가지 선택 항목을 중복으로 선택할 수 X

ex)
<input type="radio" name="gender"/> 남자 / <input type="radio" name="gender"/> 여자

--> 두가지 선택 항목이 name="gender"라는 이름으로 공통적으로 들어가 있으므로 중복 선택이 불가능하다


ex) test7.html

-->

  • textarea ( textarea는 특이하게 빈태그 /> 로 닫아주는것이 아닌 따로 닫아줌)
  • <textarea roows="3" cols="40"></textarea> : 3행의 각 행마다 40글자까지 입력할 수 있는 텍스트 범위칸 만들기

  • type="checkbox" 일때

    • 중복 선택 될 수 있다
    • 나중에 백엔드랑 연동할 것을 생각하여 미리 name으로 묶어두면 편하다
    • 체크박스 부분이 아닌 글자 부분을 눌러도 체크되게 하려면 label 속성 사용한다

ex) test7-1.html

-->


  • type="button" 일때
    • 기본적인 버튼을 생성

  • type="image" 일때
    • 이미지 버튼을 생성

  • type="submit" 일때
    • 제출하는 버튼을 생성

  • type="reset" 일때
    • 입력취소 버튼을 생성
    • 입력받은 내용물들을 삭제

  • type="file" 일때
    • 파일선택 버튼을 생성

  • type="hidden" 일때
    • 서버에게 몰래 무언가를 전송할때 사용

ex) test7-2.html

-->


문법 (select)

  • 감춰놨다가 버튼을 누르면 나오는 태그 (단일선택)
  • 체크박스에서 맨 처음 선택되어져 나오는 option을 선택하려면 <option selected="selected"></option>
  • 맨처음 보여지는 select 의 option 크기를 설정하려면 <select size="숫자"></select>
  • 중복선택을 가능하게 하려면 <select multiple="multiple"></select>

***
ctrl 누르면 중복선택, shift 누르면 연속선택

ex) test7-3.html

-->

0개의 댓글