<input> 태그 정리(HTML)

<input> 태그 

- input 태그의 type이 같은 태그들이 여러개 있다. 예를들어 input type="text"인 태그가 여러개 있는데 각 input 태그를 구별하기 위해서 id 속성을 이용할 수 있다. id 속성을 이용해서 구별 뿐만 아니라 label태그를 이용해 캡션을 붙일 수도 있고 원하는 CSS도 적용할 수 있다.

<li>	
	<label for="one">라벨1</label>
	<input type="text" value="wow1" id="one">
</li>

<li>
	<label for="two">라벨2</label>
	<input type="text" value="wow2" id="two">
</li>

<li>
	<label for="three">라벨3</label>
	<input type="text" value="wow3" id="three">
</li>


<style>
	#one{
    	color: red;
    }
    
    #two{
    	color: blue;
    }
    
    #three{
    	color: green;
    }
</style>

라벨1

라벨2

라벨3

- input 태그에는 type을 뭐로 해주냐에 따라서 다양하게 정보들을 입력할 수 있다. type 속성의 각 값에 따른 설명을 보자

유형	설명
hidden	사용자에게는 화면에 보이지 않는 정보지만 서버로 데이터가 넘어간다.
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자이다.
search	검색 상자를 넣는다. text와 차이점은 검색어를 입력했을 때 x자 버튼이 생기고 클릭 시 검색어를 쉽게 지울 수 있다.
tel	전화번호 입력 필드
url	URL 주소 입력 필드 반드시 'http://'로 시작하는 사이트 주소를 입력해야 한다.
email	메일 주소 입력 필드 브라우저 자체에서 사용자가 입력한 내용이 메일 주소 형식에 맞는지 자동으로 체크해 준다.
password	비밀번호 입력 필드 점으로 화면에 표시된다.
datetime	국제 표준시로 설정된 날짜와 시간을 넣는다.
datetime-local	사용자가 있는 지역을 기준으로 날짜(연,월,일,시,초, 분할초)와 시간을 넣는다.
date	사용자 지역 기준 날짜 (연,월,일)
month	사용자 지역 기준 날짜(연,월)
week	사용자 지역 기준 날짜(연,주)
time	사용자 지역 기준 시간 (시,분,초, 분할초)
number	숫자를 조절할 수 있는 화살표
range	숫자를 조절할 수 있는 슬라이드 막대
color	색상 표
checkbox	2개 이상 선택 가능한 체크박스
radio	항목에서 1개만 선택할 수 있는 라디오 버튼
file	파일을 첨부할 수 있는 버튼
submit	서버 전송 버튼
image	submit 버튼 대신 사용할 이미지
reset	리셋 버튼
button	버튼

- input 태그의 텍스트 필드에 넣을 수 있는 속성을 살표보자

속성	설명
name	텍스트 필드 구별할 수 있도록 이름을 붙임
size	텍스트 필드의 길이를 지정한다. 예를들어 size를 7로하고 텍스트를 10글자 입력하면 7글자만 보이는 텍스트 필드 길이라 7글자만 보인다.
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드에 표시되는 내요이다. 만약 이 속성에 값을 넣지 않으면 빈 텍스트 필드가 된다.
maxlength	텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정한다.

- type이 radio와 checkbox인 태그는 checked 속성으로 처음부터 체크상태로 할지 아닐지 지정할 수 있다.

- type이 radio나 checkbox인 태그는 라디오 버튼이나 체크박스가 여러 개 있을 경우, 서버에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정한다. 또한 라디오 버튼의 경우 버튼중에서 하나만 선택하는 것이기에 관련있는 라디오 버튼끼리 name 속성 값을 똑같이 해서 하나만 선택가능하게 한다.

- type이 time, datetime, datetime-local 인 경우 min 속성을 통해 날짜나 시간의 최솟값을 지정하고 max로 날짜나 시간의 최댓값을 지정할 수 있다. 또한 step 속성으로 스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지 지정한다.

<form>
    <h2>hidden</h2>
    <input type="hidden" name="hiddenInput" value="서버로 넘어가는 값">
    <h2>text</h2>
    <input type="text" maxlength="10" value="10글자만 입력가능">
    <h2>search</h2>
    <input type="search">
    <h2>tel</h2>
    <input type="tel" size="10">
    <h2>url</h2>
    <input type="url" size="20">
    <h2>email</h2>
    <input type="email">
    <h2>password</h2>
    <input type="password">
    <h2>datetime</h2>
    <input type="datetime">
    <h2>datetime-local</h2>
    <input type="datetime-local">
    <h2>date</h2>
    <input type="date">
    <h2>month</h2>
    <input type="month">
    <h2>week</h2>
    <input type="week">
    <h2>time</h2>
    <input type="time" id="appt" name="appt" min="09:00" max="18:00">
    <h2>number</h2>
    <input type="number" step="5">
    <h2>range</h2>
    <input type="range">
    <h2>color</h2>
    <input type="color">
    <h2>checkbox</h2>
    <input type="checkbox">
    <input type="checkbox" checked >
    <input type="checkbox">
    <h2>radio</h2>
    <ul>
    	<li><input type="radio" name="radioName"></li>
    	<li><input type="radio" name="radioName"></li>
    	<li><input type="radio" name="radioName" checked ></li>
    </ul>
    <h2>file</h2>
    <input type="file">
    <h2>submit</h2>
    <input type="submit">
    <h2>image</h2>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPTguhV2D25pM3yUQrsa_kDKt6U8llBLWLGg&usqp=CAU">
    <h2>reset</h2>
    <input type="reset" value="리셋">
    <h2>button</h2>
    <input type="button" value="버튼">
</form>

hidden

text

search

tel

url

email

password

datetime

datetime-local

date

month

week

time

number

range

color

checkbox

radio

file

submit

image

reset

button