HTML

11. input 태그(2)

HJ76 2023. 3. 27. 15:51
type 속성
checkbox
  • 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼
  • 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함
        <p>취미 : 운동<input type="checkbox" name="hobby" value="운동">
            음악감상<input type="checkbox" name="hobby" value="음악감상">
            영화감상<input type="checkbox" name="hobby" value="영화감상">
            게임<input type="checkbox" name="hobby" value="게임">
            등산<input type="checkbox" name="hobby" value="등산">
        </p>

file
  • 원하는 파일을 서버로 전송하기 위한 글상자
<p>첨부파일 : <input type="file" name="file"></p>

파일 선택을 클릭

파일을 선택할 수 있는 창이 나옴

파일을 선택한뒤 열기 클릭

선택한 파일명이 나옴

button
  • 이벤트가 없는 일반버튼
<input type="button" value="버튼명">
<button>버튼명</button>

reset
  • 입력받은 데이터를 초기화 하는 버튼
<input type="reset" value="메세지">
<p>아이디 : <input type="text" name="userid" id="userid" maxlength="20" placeholder="아이디를 입력하세요" required><input type="reset" value="다시입력"></p>

다시 입력 클릭

리셋됨

submit
  • 입력받은 데이터를 서버에 제출하는 버튼
<input type="submit" value="메세지">
<input type="submit" value="회원 가입">

hidden
  • 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자
<input type="hidden" name="hidden" value="서버로 전달될 값">
email
  • 이메일을 입력받는 글상자(@ 필요)
<input type="email">
<p>이메일 : <input type="email"></p>

@를 넣지 않으면 메세지가 나옴

url
  • 웹사이트를 입력받는 글상자(http 필요)
<input type="url">
<p>웹사이트 : <input type="url"></p>

http를 넣지 않으면 메세지가 나옴

tel
  • 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)
<input type="tel">
<p>휴대폰 번호 : <input type="tel"></p>

date
  • 원하는 날짜를 입력받는 글상자
<input type="date">
<p>생년월일 : <input type="date"></p>

 

달력 클릭

날짜 선택 가능

number
  • 원하는 숫자를 입력받는 글상자
<input type="number" min="최소값" max="최대값" step="증가값">
<p>좋아하는 숫자 : <input type="number" min="1" max="10" step="1"></p>

color
  • 원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB컬러값으로 서버에 전달)
<input type="color">
<P>좋아하는 색상 : <input type="color"></P>

검정색 클릭

색상을 선택할 수 있는 창이 나옴

search
  • 검색어를 입력받는 글상자
<input type="search">
<p>검색어 : <input type="search"></p>

range
  • 일정 범위안에 값만을 입력하는 조절바
<input type="range" min="최소값" max="최대값" value="현재값">
<p>프로그래밍 능력 : <input type="range" min="0" max="5" value="3"></p>

파랑색 원으로 조절 가능

속성
readonly
  • 데이터를 볼 수 있으나 수정할 수 없게 설정(서버로 데이터가 전달됨)
<input type="타입" name="이름" value="고정시킬값" readonly>
<p>나이 : <input type="text" name="age" value="-1" readonly></p>

값을 변경할 수 없음

disabled
  • 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달되지 않음)
<input type="타입" name="이름" disabled>
<p>주민등록번호 : <input type="text" name="ssn" disabled></p>

입력할 수 없음

required
  • 데이터를 submit 할 때 데이터를 필수로 입력하도록 강제하는 설정
<input type="타입" name="이름" required>
<form action="post">
<p>아이디 : <input type="text" name="userid" id="userid" maxlength="20" placeholder="아이디를 입력하세요" required></p>
<input type="submit" value="회원 가입">
</form>

아이디를 입력하지 않으면 summit이 작동안함

여러줄 글상자
  • 여러줄의 텍스트를 입력받는 글상자
<textarea cols="가로 글자수" rows="세로 줄수">value</textarea>
<p>자기소개</p>
<textarea name="content" cols="50" rows="5"></textarea>