HTML_input 태그(type속성 추가)

이글에는 일전에 소개했던 input 태그 속성에 대해 추가 설명하겠다.

https://coding-diary100.tistory.com/40

HTML_form,input,label 태그

이전에 정리한 input 속성의 type이다

 

 

input 태그 : 입력상자

 

type 속성

checkbox : 러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼
✔그룹을 맺기 위해 name속성을 동일하게 해야함

 

File : 원하는 파일을 서버로 전송하기 위한 글상자

button : 이벤트가 없는 일반버튼

reset  : 입력받은 데이터를 초기화 하는 버튼

submit : 입력받은 데이터를 완료하는 버튼

hidden : 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자

email  : 이메일을 입력받는 글상자(@필요)

url    : 웹사이트를 입력받는 글상자(http필요)

tel    : 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)

date   : 원하는 날짜를 입력받는 글상자

number : 원하는 숫자를 입력받는 글상자

<input type="number" min ="최솟값" max ="최댓값" step ="증가값">

color  : 원하느 색상을 입력받는 요소(선택한 색상은 16진수 RGB컬러값으로 서버에 전달)

search : 검색어를 입력받는 글상자

range  : 일정 범위안에 값만을 입력하는 조절바
<input type="range" min="최솟값" max="최대값" value="현재값"></input>

 

추가된 type 속성이 많지만 하나 하나 알아보자

 

1.checkbox 

<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>

 

 

2. button ,reset ,submit

이는 버튼 태그와 함께 정리한 글이 있기에 첨부한다.

https://coding-diary100.tistory.com/41

HTML_button 태그

 

 

3.hidden : 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자

말그대로 작성하면 가시적으로 보이지는 않으나 서버의 값을 전달할 수 있다.

<input type="hidden" name="hidden" value="서버로 전달될 값">

 

 

4.email, url , tel, date

<p>이메일:<input type="email"></p>

<p>웹사이트:<input type="url" ></p>
<p>휴대폰번호:<input type="tel"></p>
<p><input type="date"></p>

 

5.number, color, search

<p>좋아하는 숫자: <input type="number" min="1" max="10" step="1"></p>
<p>좋아하는 색상 <input type="color"></p>
<p>검색어 <input type="search"></p>

 

 

 

6.range  

<p>프로그래밍 능력: <input type="range" min="0" max="5" value="3"></p>

 

 

input 추가 속성

 

●readonly : 데이터를 볼 수 있으나 수정할 수 없게 설정(서버로 데이터가 전달됨)

 

●disabled : 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달 되지 않음)

 

 

 

고정값과 수정불가가 된 모습