입력에 필요한 태그와 속성 (HTML & CSS) 01

다음 내용은 이지스 퍼블리싱의 고경희 님이 집필하신

 

HTML과 CSS 자바스크립트 웹 표준의 정석에서 발췌하였다.

 

 

 

폼에서 사용할 수 있는 태그는 다음과 같다

 

<form>  폼의 시작과 끝을 알려준다.

<fieldset>  폼 요소를 그룹으로 묶는다.

<legend>  필드셋에 제목을 붙인다.

<input>  사용자가 내용을 입력할 필드를 삽입한다. (input 태그는 하위 속성을 많이 가지고 있다.)

<select>, <option> 드롭다운 목록을 삽입한다.

<textarea> 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 

<datalist> 데이터 목록을 삽입한다.

 

등이 있다.

 

input 태그는 여러 유형과 속성이 있는데 유형을 먼저 보자면

 

text  한 줄 짜리 텍스트 상자를 생성

password  비밀번호를 입력할 수 있는 필드 생성(비밀번호는 ****와 같이 표시)

search  검색이 가능한 입력 필드를 생성

url  URL주소를 입력할 수 있는 필드 생성

email  이메일주소를 입력할 수 있는 필드 생성

tel  전화번호

checkbox  여러 항목에서 복수 선택이 가능한 체크박스

radio  주어진 여러 항목에서 1개만 선택 가능한 라디오 버튼(원형 버튼을 말한다.)

number  숫자를 조절할 수 있는 스핀 박스

range  숫자를 조절할 수 있는 슬라이드 막대

date  사용자 지역을 기준으로 날짜(연, 월, 일)

month  사용자 지역을 기준으로 날짜(연, 월)

week  사용자 지역을 기준으로 날짜(연, 주)

time  사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)

datetime  국제 표준시로 설정된 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)

datetime-local  사용자가 있는 지역을 기준으로 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)

submit  전송 버튼

reset  리셋 버튼

image  submit 버튼 대신 사용할 이미지

button  일반 버튼 생성

file  파일을 첨부할 수 있는 버튼

hidden  사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드

 

정도가 있다.

<input> 태그의 유형(type)들은 대부분 그 이름을 보면 그 내용이 유추가 가능하다.

그래서 크게 어렵지는 않고 이 정도가 있다고 보고 넘어가도 좋다

 

여기에서 유형(type)와 아이디(id)는 다르게 입력해야한다.

id는 사용자가 정의한 값으로 할 수 있지만, 어떤 목적으로 만들었는지 알기 쉽게 만들면 좋다.

 

 

 

-

 

<input> 태그는 여러 속성을 가지고 있다.

그 내용들은 다음과 같다

 

autofocus  웹 문서가 열리면 해당 입력 필드 안에 마우스 포인터를 표시(보통 맨 위의 필드에 사용, 예를 들자면 로그인 필드라던지)

placeholder  텍스트 필드에 힌트를 표시 (로그인, 비밀번호 등을 입력하기 전에 회색 글씨로 표시되어 있는게 힌트다.)

readonly  입력 필드를 읽기 전용으로 지정한다. (random이 아니라 read에서 파생된 말이다.)

required  필수 입력 필드를 지정

max  숫자 입력 필드에서 최댓값을 지정

min  숫자 입력 필드에서 최솟값을 지정

step  숫자 입력 필드에서 증감할 간격을 지정

maxlength  텍스트 관련 필드에서 입력할 수 있는 최대 길이

minlength  텍스트 관련 필드에서 입력할 수 있는 최소 길이

size  텍스트 관련 필드에서 화면에 표시할 크기를 지정

list  연결할 데이터 목록을 지정

 

 

그리고 대부분의 label과 input 태그는
<form> 혹은 <fieldset> 안에서 쓰이게 된다

 

예를 들자면

 

<form>

<ul>

    <li>

        <label for "your-tel"> 연락처 </label>

        <input type="tel" id="your-tel">

    </li>

</ul>

</form

 

이런 식이 될 것이다