| 속성명 | 설명 |
|---|---|
| text |
- 짧은 내용의 텍스트를 쓸 수 있는 직사각형 박스. |
| password |
- 비밀번호 전용 형식. - 입력 내용이 검은색 원으로 대체되어 나온다. |
| radio |
- 많은 값들 중 하나만 선택해야 할 때 쓴다. - name 속성은 꼭 통일해야한다. |
| checkbox |
- 많은 값들 중 둘 이상 선택해야 할 때 쓴다. - name 속성은 각각 다르게 작성. |
|
- 이메일 작성할 때 쓰는 속성. - ie 10 이상부터 지원한다. |
|
| tel |
- 전화번호를 작성할 때 쓰는 속성. - ie 10 이상부터 지원한다. |
| date |
- 연/월/일을 선택할 수 있는 달력이 나온다. - ie는 지원하지 않는다. |
| datetime-local |
- 연/월/일 + 시/분을 선택할 수 있는 달력이 나온다. - ie는 지원하지 않는다. |
| month |
- 연/월을 선택할 수 있는 달력이 나온다. - ie는 지원하지 않는다. |
| week |
- 연/주를 선택할 수 있는 달력이 나온다. - ie는 지원하지 않는다. |
| time |
- 시간을 선택할 수 있는 필드가 나온다. - ie는 지원하지 않는다. |
| number |
- 숫자를 선택할 수 있는 콤보박스가 나온다. - min: 최소값.- max: 최대값.- value: 초기값.- ie 10 이상부터 지원한다. |
| color |
- 색상을 선택할 수 있는 팔레트가 나온다. - ie는 지원하지 않는다. |
| search |
- 검색어 작성 전용 속성. - ie 10 이상부터 지원한다. |
| file |
- 사용자의 파일 업로드를 가능하게 한다. - 파일 확장자를 제한하고 싶을 땐 accept 속성을 사용하면 된다.- 사용법은 링크 참고. <input type="file"> - ie 10 이상부터 지원한다. |
| submit |
- 클릭 시 form 내용을 서버로 보내는 역할을 한다. |
| reset |
- 클릭 시 해당 폼과 관련된 input의 데이터를 초기값으로 되돌린다. |
| button |
- 사용자 지정 버튼. 기능을 따로 지정해야 한다. - 이것보단 button 태그를 쓰는 게 더 선호되는 방식. |
html5에서 새로 나온 속성들은 대부분 ie에서 지원이 안 된다. 꼼꼼히 살펴보고 사용하는 게 좋을 듯함.
달력이 나오는 속성들은 특히... (ㅠㅠ)
html5에서 새로 나온 태그로, input : type="button" 의 상위 버전이다.
태그 안에 텍스트는 물론 img까지 포함할 수 있어 활용도가 높다.
대표적인 속성으로는 type이 있다.(submit, reset, botton)
브라우저마다 기본값이 다를 수 있으므로 정확하게 명시해주는 게 좋다.
더 자세한 건 링크 참고. <button> : 버튼 요소
type : text보다 더 많은 길이의 텍스트 데이터를 받을 수 있는 태그.
col(가로), row(세로) 속성으로 텍스트 상자의 너비와 높이를 조절할 수 있다.
가로, 세로는 css의 width, height로도 조절 가능.
마찬가지로 name 속성을 필수로 적어야 한다.
1 2 3 4 | <label for="ex_test"> <p>결과물</p> </label> <textarea name="ex_test" id="ex_test" cols="30" rows="10"></textarea> | cs |
드롭다운 형태의 콤보 박스를 만드는 태그.
로그인 화면에서 이메일 주소 선택 등으로 많이 쓰인다.
select 안에 option이 자식 요소로 들어가는 형태이다. 옵션은 여러 개 넣을 수 있다.
이메일 주소를 쓸 수 있는 박스를 만들어보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <form action="#" method="POST"> <p id="adPermmison"> <input id="ex_checkbox" type="checkbox" name="ex_checkbox2"> <label for="ex_checkbox"> <span>광고 수신 동의</span> </label> </p> <div class="dis-inb txt-r"> <label for="ex_text3"> <span>Email</span> </label> <input id="ex_text3" type="text" name="ex_text3"> @ <select name="ex_select" id="ex_select"> <option>선택하세요</option> <option value="nate.com">nate.com</option> <option value="nate.com">naver.com</option> <option value="nate.com">gmail.com</option> <option value="nate.com">yahoo.com</option> <option value="nate.com">daum.com</option> </select> <button type="submit">확인</button> </div> </form> | cs |
힘들다...