[기본 개념] 2 | (2.3) input 태그의 주요 속성, 주요 태그

[기본 개념] 2 | (2.3) input 태그의 주요 속성, 주요 태그

1 폼 삽입하기

2 사용자 입력을 위한 input 태그

3> input 태그의 주요 속성

4> 폼에서 사용하는 여러 가지 태그

3 input 태그의 주요 속성

자동으로 입력 커서를 갖다 놓는 autofocus 속성

 

기본형

<input type=텍스트-입력-필드 autofocus required>

 

 autofocus 속성을 사용하면 페이지를 불러오자마자 원하는 요소에 마우스 포인터를 표시할 수 있다.

 

힌트를 표시해주는 placeholder 속성

 

기본형

<input type=텍스트-입력-필드 placeholder="힌트로 표시할 텍스트" required>

 

 placeholder 속성을 사용하면 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 한다.

 

읽기 전용 필드를 만들어주는 readonly 속성

 

기본형

<input type=텍스트-입력-필드 readonly>

 

 readonly 속성을 사용하면 사용자가 입력하지 못하고 읽기만 하는 읽기 전용 필드를 만들 수 있다.

 

필수 입력 필드를 지정하는 required 속성

 

기본형

<input type=텍스트-입력-필드 required>

 

 required 속성을 사용하면 내용을 반드시 입력해야 하는 필수 필드로 만들 수 있다.

4 폼에서 사용하는 여러 가지 태그

여러 줄을 입력하는 텍스트 영역 <textarea> 태그

 

기본형

<textarea>내용</textarea>

 

 <textarea> 태그를 사용하면 텍스트를 여러 줄 입력하는 영역을 만들 수 있다. 또한 너비 크기를 지정하는 cols 속성과 몇 줄을 표시할지 지정하는 rows 속성을 사용한다.

 

(ex. 텍스트를 여러 줄 입력하기 )

 

<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>

 

드롭다운 목록을 만들어주는 <select>, <option> 태그

 

기본형

<select>

  <option value="값 1">내용 1</option>

  <option value="값 2">내용 2</option>

</select>

 

 <select> 태그는 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택할 수 있고, <option> 태그를 사용하여 드롭다운 목록을 표시한다.

 

 <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 원하는 항목을 추가한다. 또한 value 속성을 사용해 서버로 넘겨주는 값을 지정한다.

 

 <select> 태그에는 다음과 같은 속성이 있다.

 

종류	설명
size	화면에 표시할 드롭다운 항목의 개수를 지정
multiple	드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용

 

 <option> 태그에는 다음과 같은 속성이 있다.

 

종류	설명
value	해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
selected	드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목 지정

 

데이터 목록을 만들어주는 <datalist>, <option> 태그

 

기본형

<input type="text" list="데이터 목록 id">

<datalist id="데이터 목록 id">

  <option value="서버로 넘길 값 1">선택 옵션 1</option>

  <option value="서버로 넘길 값 2">선택 옵션 2</option>

</datalist>

 

 <datalist> 태그를 사용하면 미리 만들어 놓은 값 중에서 선택할 수 있고, <option> 태그를 사용해 각 데이터의 옵션을 표시한다. 또한 value 속성을 사용해 서버로 넘겨줄 값을 지정한다.

 

버튼을 만들어주는 <button> 태그

 

기본형

<button type="submit">내용</button>

<button type="reset">내용</button>

<button type="button">내용</button>

 

 <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있고, 콘텐츠를 포함할 수 있어서 아이콘이나 CSS 를 이용해 원하는 형태로 꾸밀 수 있다.

 

 <button> 태그에는 다음과 같은 속성이 있다.

 

종류	설명
submit	폼을 서버로 전송
reset	폼에 입력한 내용을 초기화
button	버튼 형태만 있고 기능은 없음

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)