HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼)
<input> 태그 (사용자
<input> 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다.
type 속성이 굉장히 많다.
| 종류 | 설명 |
| text | 한 줄짜리 입력 텍스트 박스를 넣는다. |
| password | 패스워드 입력 필드를 넣는다. |
| serach | 검색 입력 필드를 넣는다. 이 필드에 입력시 오른쪽에 x버튼 추가되어 손쉽게 입력내용 지울 수 있게 된다. |
| url | URL 주소 입력 필드를 넣는다. |
| 이메일 주소 입력 필드를 넣는다. | |
| tel | 전화번호 입력 필드를 넣는다. |
| checkbox | 선택지가 2개 이상 있는 체크 박스를 넣는다. |
| radio | 선택지가 1개만 있는 라디오 버튼을 넣는다. |
| number | 숫자 조절가능한 스핀 박스를 넣는다. |
| range | 숫자 조절가능한 슬라이드 막대를 넣는다. |
| date | 사용자 지역 기준으로 날짜(연, 월, 일)을 넣는다. |
| month | 사용자 지역 기준으로 날짜(월, 일)을 넣는다. |
| week | 사용자 지역 기준으로 날짜(연, 주)를 넣는다. |
| time | 사용자 지역 기준으로 시간(시,분,초,분할 초)를 넣는다. |
| datetime | 국제 표준시(UTC)로 지정된 날짜, 시간(연,월,일,시,분,분할 초)를 넣는다. |
| datetime-local | 사용자 지역 기준으로 날짜, 시간(연,월,일,시,분,분할 초)를 넣는다. |
| submit | 전송 버튼을 넣는다. |
| reset | 리셋 버튼을 넣는다. |
| image | submit 버튼 대신 사용할 이미지 넣는다. |
| button | 일반 버튼을 넣는다. |
| file | 파일 첨부할 수 있는 버튼 넣는다. |
| hidden | 사용자에게는 보이지 않는 서버로 넘겨주는 값 있는 필드 만든다. |
type="text", type="password"
<form>
<fieldset>
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>패스워드: <input type="password" id="user_pw" size="10"></label>
<input type="submit" value="로그인">
</fieldset>
</form>| 종류 | 설명 |
| size | 텍스트, 비밀번호 필드의 길이를 지정한다. 최대 입력 수가 10자이고, size=5이면, 나머지 5글자는 화면에 보이지 않는다. |
| value | 텍스트 필드 부분에 보여질 내용이다. value 속성 사용하지 않으면 빈 문자가 보여진다. |
| maxlength | 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수 |
type="checkbox", type="radio"
<form>
<fieldset>
<legend>과일 선택></legend>
<label><input type="checkbox" value="apple">사과</label>
<label><input type="checkbox" value="banana">바나나</label>
<legend>유기농 선택></legend>
<label><input type="radio" name="organic"value="yes">유기농</label>
<label><input type="radio" name="organic"value="no">유기농 아님</label>
</fieldset>
</form>| 종류 | 설명 |
| value | 선택한 checkbox 도는 radio 값을 서버로 넘겨줘야 할 때 사용함. 영문 또는 숫자를 사용해야하며, 필수 속성이다. |
| checked | 처음부터 체크해두고 싶은 항목에 사용 |
※ radio 버튼에서는 name 속성을 동일하게 지정해야한다. 이 속성은 php 등에서 폼 요소 제어하는 용도로 쓰인다.
type="date", type="month", type="week"
날짜를 입력할 때 사용된다.
date는 연도, 월, 일
month는 연도, 월
week는 주
<form>
<fieldset>
<input type="date">
<input type="month">
<input type="week">
</fieldset>
</form>type="time", type="datetime", type="datetime-local"
time은 시간을 지정할 때 사용된다.
datetime과 dattime-local은 날짜+시간을 지정할 때 사용된다.
<form>
<fieldset>
<input type="time">
<input type="datetime">
<input type="datetime-local">
</fieldset>
</form>type="submit", type="reset"
submit은 폼에 입력한 정보를 서버로 전송한다.
reset은 폼에 입력한 정보를 모두 지운다.
<form>
<fieldset>
<input type="submit">
<input type="reset">
</fieldset>
</form>type="image" type="button"
image는 submit 버튼과 동일 기능을하는 이미지 버튼을 만든다.
button은 submit이나 reset 버튼같은 기능이 없는 그냥 버튼의 형태만 보여준다.
버튼 클릭해서 자바스크립트 실행할 때 사용된다.
<form>
<fieldset>
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>패스워드: <input type="password" id="user_pw" size="10"></label>
<input type="image" src="image/login.png" alt="로그인">
</fieldset>
</form><form>
<fieldset>
<input type="button" value="창 열기" onclick="window.open('example.html')">
</fieldset>
</form>type="file"
file은 첨부파일을 선택할 때 사용된다.
첨부파일을 서버로 보내려면 자바스크립트 등의 웹 프로그래밍 언어 사용해야 한다.
<form>
<fieldset>
<input type="file">
</fieldset>
</form>type="hidden"
hidden은 사용자에게는 보이지 않지만. submit 클릭시 폼과 함께 서버로 보낼 정보를 넘기기 위해 사용한다.
<form>
<fieldset>
<input type="hidden" name="이름" value="서버로 넘길 값">
</fieldset>
</form>
input 태그 속성
- autofocus
autofocus 속성은 웹 페이지를 불러오자마자 특정 폼에 마우스 포인터를 표시하여 바로 입력할 수 있게 해준다. - placeholder
입력란에 어떤 정보를 입력해야하는지 연한 글자로 보여준다. - readonly
사용자가 입력은 못하고 읽기만 할 수 있는 읽기 전용 필드 - required
필수 입력 항목 지정.
<form>
<fieldset>
<input type="text" placeholder="아이디를 입력하세요." autofocus>
<input type="text" readonly>
<input type="text" required>
</fieldset>
</form><textarea> 태그
폼에서 텍스트를 여러 줄 입력하는 영역
cols : 텍스트 영역의 가로 너비를 문자 단위 지정
rows : 텍스트 영역의 세로 길이를 줄 단위 지정. 줄 개수가 더 많아지면 스크롤 막대기가 생김.
<form>
<fieldset>
<textarea cols="10" rows="10"></textarea>
</fieldset>
</form><select>, <option> 태그
드롭다운 목록을 만들어준다.
<select> 태그로 드롭다운 목록 시작/끝을 표시하고,
그 안에 <option> 태그를 이용해 항목 추가한다
value 속성으로 서버에 값을 넘겨준다.
<form>
<fieldset>
<select>
<option value="값1">선택1</option>
<option value="값2">선택2</option>
</select>
</fieldset>
</form><select> 태그의 속성
| 종류 | 설명 |
| size | 화면에 표시할 드롭다운 항목 개수 |
| multiple | 드롭다운 목록에서 2개 이상 항목 선택가능 |
<option> 태그의 속성
| 종류 | 설명 |
| value | 서버에 넘겨줄 값 지정 |
| selected | 기본적으로 선택할 항목 |
<datalist>, <option> 태그
텍스트 필드에 값을 입력하지 않고 미리 만들어 놓은 값 중에 선택할 수 있게 해준다.
<datalist> 태그로 목록의 시작/끝 표시하고,
<option> 태그를 사용해 각 데이터의 옵션 표시한다.
value 속성으로 서버에 넘겨줄 값을 지정해주는데, 이 값이 텍스트 필드에도 나타난다.
<input> 태그의 list 값과 <datalist> 태그의 id값을 동일하게 지정해주어 연결해줄 수 있다.
<form>
<fieldset>
<input type="text" list="datalist_id">
<datalist id="datalist_id">
<option value="서버로 넘길 값1">선택1</option>
<option value="서버로 넘길 값2">선택2</option>
</select>
</fieldset>
</form><button> 태그
<button> 태그를 이용해 폼을 전송하거나 리셋하는 버튼을 생성할 수 있다.
<input type="button">과 다른 것이다. → 이건 자바스크립트 실행용 버튼
<form>
<fieldset>
<button type="submit">확인</button>
<button type="reset">취소</button>
</fieldset>
</form>