HTML - input type 속성값
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 폼입력 양식</title>
</head>
<body>
폼 입력 양식은 form 태그 안에 input 태그로 사용한다.
<form method="post" action="#">
<input type="text"/><!-- type을 지정 안하면 default인 text로 지정됨-->
<input type="submit" value="제출"/>
<input type="reset" value="취소"/>
</form>
</body>
</html>
input type 속성값
HTML form 양식에서 input 태그를 이용해 입력을 받는다. input 태그에는 type속성 외에 value, name속성이 있다.
- type : input 태그의 유형
- name : form이 제출될 때 서버에서 form data를 참조하기 위해서 사용. 서버로 전달되는 이름을 뜻함. (사용자 임의 지정)
- value : input 태그의 초기값을 뜻하며 사용자가 변경 가능
input type 속성값들은 아래와 같다.
1) text : 한줄 입력박스를 만들어주며, 만약에 input의 type을 지정해주지 않으면 defalut 상태로 text가 지정된다.
2) password : 암호화된 값을 입력할 수 있는 한줄 입력박스를 만든다.
3) radio : 라디오 버튼을 만든다. 라디오 버튼은 단 하나만 선택 가능하다.
성별:<input type="radio" name="gender" value="male" />남성
<input type="radio" name="gender" value="female" />여성
<!-- radio는 동그라미 버튼을 만들고 단 하나만 선택 가능하다. --><br/>
<!-- label for 이름과 radio의 id속성명이 같으면 마우스 조작이 불편하신 분들은
동그라미 버튼을 잘 선택하지 못해도 라벨이름 남성, 여성만 선택해도 라디오 버튼이 체크된다. -->
<label for="male">남성</label>
<input type="radio" name="gender" id="male" /><br/>
<label for="female">여성</label>
<input type="radio" name="gender" id="female" /><br/>
4) checkbox : 복수개를 선택할 수 있는 체크박스 버튼을 만든다.
과일선택:<input type="checkbox" name="fruit" value="apple" checked />사과
<!-- checked속성을 사용하면 미리 선택됨. checkbox는 네모 버튼을 만들고 하나 이상 복수개 동시 선택 가능하다. -->
<input type="checkbox" name="fruit" value="banana" />바나나
<input type="checkbox" name="fruit" value="grape" />포도<br/>
5) file : 컴퓨터에 있는 파일을 선택할 수 있게 한다.
<form method="post" action="#" enctype="multipart/form-data">
<!-- enctype속성을 지정해야 첨부한 파일을 서버로 전송할 수 있다.(자료실 기능을 만들 수 있다.)
폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시한다.
form의 형식이 post일때만 사용 가능하다.
multipart/form-data는 모든 문자를 인코딩하지 않음을 명시.
이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용.-->
파일첨부: <input type="file" name="ima"/><br/>
<input type="submit" value="전송"/>
<input type="reset" value="취소"/>
</form>
6) image : 이미지 전송 버튼을 만든다. (submit 과 같은 제출 버튼으로 사용)
<input type="image" src="../Images/submit.jpg" alt="제출버튼" />
<!-- image버튼은 자료를 서버로 제출한다. 이미지를 submit과 같은 제출 버튼으로 사용. -->
7) hidden : 사용자에게는 보이지 않지만 값을 서버로 넘길 때 많이 사용한다. (소스에서는 보인다.)
8) submit : 자료를 서버로 보내는 버튼을 생성한다.
9) reset : 입력박스 값을 초기화 하는 버튼을 생성한다.
10) button : 버튼을 생성한다.
11) textarea : 여러 줄을 입력할 수 있는 입력박스를 만든다.
고객의 의견:<textarea name="feedback" rows="5" cols="50" ></textarea>
<!-- textarea태그는 한줄 이상 여러줄을 입력할 수 있는 입력박스를 만든다.
rows속성은 행을 만들고, cols속성은 열을 만든다. -->
12) select : 여러 개의 목록항목을 보여주고 사용자로 하여금 선택하게 한다.
자동차:<select name="cars">
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="hyudai" selected>현대자동차</option>
<option value="kia">기아자동차</option>
<!-- radio, checkbox에서 checked 속성을 사용하면 미리 선택됨.
select에서는 selected속성을 사용하면 미리 선택됨. -->
</select>
+ html5에서 추가된 입력양식
1) email : 사용자에게 올바른 이메일 주소가 입력되었는지를 알려준다.
이메일: <input type="email" required /><br />
<!-- required 속성은 유효한 이메일인지 검사한다. -->
2) url : 웹사이트 주소를 입력받는 컨트롤. 올바른 주소가 입력되었는지를 알려준다.
url: <input type="url" required /><br />
<!-- required 속성은 유효한 url인지 검사한다. -->
3) tel : 전화번호를 입력받는 양식 (사파리8에서만 지원?)
tel: <input type="tel" required pattern="[0-9]{4}-{0-9}{4}-{0-9}{4}" title="####-####-####" /><br />
<!-- pattern에 지정된 정규식인 [0-9]{4}의 뜻은 0부터 9까지의 정수를 4번 반복 -->
4) color : 색상코드 입력 양식
5) month : 월, 연도 입력 양식
6) date : 날짜 입력 양식
7) time : 시간 입력 양식
8) number : 숫자만 입력받는 컨트롤
숫자:<input type="number" min="1" max="10" step="2"/>
<!-- min은 최소값, max 는 최대값, step은 증감값 -->
9) range : 2개의 숫자사이에 숫자를 선택할 수 있는 슬라이더 컨트롤
범위:<input type="range" min="1" max="10" step="2"/>
<!-- min은 최소값, max 는 최대값, step은 증감값 -->
10) sesarch : 검색어를 입력하는 양식. 검색어를 입력하면 우측에 X표시가 생겨 검색어를 바로 삭제 가능.
'언어공부 > HTML' 카테고리의 다른 글
| HTML - form 폼 입력 양식 / fieldset - 입력양식들을 그룹화 / legend - 입력양식 그룹의 제목 (0) | 2021.07.11 |
|---|---|
| HTML - div와 span (0) | 2021.07.10 |
| HTML - iframe (0) | 2021.07.09 |
| HTML - 태그 정리 (2) (0) | 2021.07.08 |
| HTML - 태그 정리 (1) (0) | 2021.07.07 |
