HTML - 입력요소

<form> 태그

입력을 위한 양식을 생성

<form action="input.jsp" method="post">
    <input type="text" name="input">
    <input type="submit">
</form>

action	데이터를 보내고 처리할 위치 지정
method	서버로 데이터를 보내는 HTTP 방법 지정 (get, post)

 

---

<input> 

 

type 속성

type 속성값	설명
text	한 줄짜리 텍스트 필드 정의
password	한 줄짜리 비밀번호 필드 정의
radio	라디오 버튼 정의
checkbox	체크 박스 정의
file	파일 선택 필드 및 “찾아보기” 버튼 정의
button	클릭 가능한 버튼 정의
submit	제출 버튼 정의
reset	초기화 버튼 정의
hidden	숨겨진 텍스트 필드 정의 (사용자에게는 보이지 않지만 서버로 전송된다.)

type이 file인 경우 form의 enctype="multipart/form-data"  꼭  설정해줘야한다

type="button" 은 전송(submit)기능이 없는 일반 버튼이다

그래서 전송을 하고 싶은 경우 onclick을 해준다.

 

 

<input> name

- 서버로 전달되어 데이터 참조에 사용되는 이름

 

<input> value 

- 요소의 값 지정

 

 

---

추가 입력 요소

 

추가된 <input> type	설명
date	날짜 선택기 정의
datetime	UTC 날짜/시각 형식을 이용한 날짜와 시각 표시 컨트롤
datetime-local	현지 날짜/시각
month	월/연도
time	시각
week	주와 연도를 선택할 수 있는 컨트롤
color	색상 코드를 입력할 수 있는 컨트롤
email	표준 이메일 주소를 입력 받아서 검증하는 컨트롤
tel	전화번호를 입력 받아서 검증하는 컨트롤
search	검색어 입력 양식을 생성
range	2개의 숫자 사이의 숫자를 선택할 수 있는 슬라이더 컨트롤
number	숫자만 입력 받는 컨트롤
url	URL만 입력 받는 컨트롤

 

 

---

 

기타 속성

type 속성값	설명
name	서버로 전달될 때 항목의 이름
value	입력 필드의 값
readonly	입력 필드를 읽기 전용으로 설정
disabled	입력 필드를 비활성화 상태로 설정(서버로 전송되지 않음)
size	입력 필드의 너비(가로 길이)
maxlength	입력 필드에 허용되는 최대 문자 수
placeholder	입력 필드에 입력 값에 대한 간단한 설명 또는 샘플 값을 표기
autocomplete	자동입력 완성
autofocus	페이지가 로드 될 때 자동으로 포커스를 받도록 설정
checked	입력 필드가 체크 된 상태임을 지정(체크박스, 라디오 버튼 형식에서 사용)
min/max	입력 필드의 최소 값/최대 값(수, 범위, 날짜 등의 형식에서 사용)
multiple	입력 필드에 둘 이상의 값을 입력할 수 있도록 함(이메일, 파일형식에서 사용)
required	필수 입력 항목으로 지정, submit 수행 시 체크 함
pattern	Submit 수행 시 입력 필드의 값이 검사되는 정규식을 지정

 

---

<textarea> 

여러줄의 택스를 입력할 경우 사용

 

<textarea rows="5" cols="50"></textarea>

rows, cols를 설정할 수 있다. (텍스트박스 크기 설정)

 

<select> 

<form action="">
<select name="cars">
	<option value="bmw" selected>BMW</option>
    <option value="benz">Benz</option>
    <option value="hyundai">현대자동차</option>
    <option value="kia">기아자동차</option>
</select>
</form>

콤보박스 형태로 출력된다.

 

option : 하나에 한 행씩 출력된다. 

selected : 콤보박스의 기본값으로 설정된다. (영어그대로 선택됨)

 

---

 

< filedset>

입력요소 그룹핑

 

<legend>를 사용하면 그룹에 제목을 붙일 수 있다.

<form>
    <filedset>
     <legend>인적사항입력</legend>
    이름 : <input type="text">
    전화번호 : <input type="text"><br>
    주소 : <input type="text"><br>
    </filedset>
    </form>

 

---

<label>

input 요소를 위한 레이블 정의

 

<form action="form.jsp">
    <label for="male">남성</label>
    <input type="radio" name="gender" id="male" value="male"><br>
    <label for="female">여성</label>
    <input type="radio" name="gender" id="female" value="female"><br>
    <input type="submit" value="제출"><br>
</form>

 

lable태그의 속성 for를 사용하면 레이블과 input의 id 속성을 통해 서로 연결 가능

 

---