input 태그 속성에 대해 자세히 살펴보기 – HTML5

input 태그 살펴보기

<input> 태그를 이용하여 폼을 만드는 방법에 대해 살펴봤습니다. 사용자들이 폼을 좀 더 사용하기 쉽게 만들기 위해 <input> 태그의 여러 속성들에 대해 살펴봅니다. 텍스트 입력창에 힌트를 표시하거나 필수 입력항목 등의 지정을 <input> 태그 속성으로 지정할 수 있습니다.

---

autofocus 속성은 웹 페이지가 열리자마자 원하는 요소에 마우스 커서를 표시하며 바로 입력 가능하게 합니다.

<input type="text" autofocus>

placeholder 속성은 사용자가 텍스트를 입력할 때 해당 필드에(텍스트 상자)에 힌트 등을 표시하게 되며 입력이 시작되면 힌트는 사라집니다.

<input type="text" placeholder="- 없이 입력">

readonly 속성은 사용자 입력을 받지 않고 해당 필드를 읽기 전용으로 변경합니다. 사용법은 readonly="true", readonly="readonly" 또는 그냥 readonly만 사용해도 해당 기능이 적용됩니다.

<input type="text" value="HTML/CSS 기초 다지기" readonly>

required 속성은 폼의 입력 사항을 모두 입력받은 후 submit으로 서버 또는 지정된 프로그램에 데이터를 전송할 때 필수 입력항목으로 지정된 항목의 입력 여부를 확인하여 입력이 안 되어 있을 때 오류메시지를 띄웁니다.

<input type="text" required>

min, max, step 속성은 해당 필드의 최소, 최댓값을 지정 가능하며 step은 허용된 범위 값 내의 간격을 지정할 수 있습니다.

<input type="number" value="5" min="5" max="50" step="5">

min, max, step 속성이 숫자입력에 적용된다면 size, minlength, maxlength 속성은 텍스트 입력에 적용됩니다. size는 길이, minlength는 최소 입력 제한 그리고 maxlength는 최대 입력 제한을 할 수 있습니다.

<input type="text" size="10" minlength="4" maxlength="15">

상기 언급된 속성들을 모두 적용해 봅니다.

페이지를 리로드(reload) 하게 되면 메일 주소에 입력 표시 커서가 표시되며, 숫자입력에 커서를 옮기면 아래위 버튼이 표시됩니다.

이외에도 <input> 태그에 적용 가능한 속성은 다음과 같습니다.

 

속성	설명
formaction	type="submit" or "image"일 때 실행할 프로그램을 연결
formmethod	폼 전달 방식 지정(GET, POST)
formnovalidate	유효성 여부 표시
height, width	type="image"일 때 폭과 높이 지정
list	<datalist>에 정의한 값을 <input> 안에 나열해 표시
multiple	type="mail" or "file"일 때 두 개 이상의 값을 입력

<datalist> 태그는 데이터 목록을 정의하며 이렇게 정의된 목록은 <input> 태그에 list 속성을 이용하여 표시할 수 있습니다.

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

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

<option>Python</option>

<option>Javascript</option>

<option>HTML/CSS</option>

이제 해당 필드를 클릭하면 데이터 목록이 표시됩니다. 만약 마우스 클릭이 아닌 키보드로 p를 입력하면 Python, J를 입력하면 Javascript, H를 입력하면 HTML/CSS가 자동 입력됩니다. 이렇게 <input> 태그로 입력할 수도 있으나 <select> 태그를 사용하면 좀 더 다양한 입력 방식을 적용할 수 있습니다.

<select> 태그는 size, multiple 속성을 사용하여 여러 개의 항목을 지정할 수 있도록 합니다. size 속성은 화면에 표시할 드롭다운 메뉴 개수를 지정하며, multiple 속성은 Ctrl 키를 이용하여 항목을 여러 개 지정할 수 있도록 합니다. (ctrl + 여러 개의 항목 지정)

<option>태그의 value 속성은 항목이 선택되어 서버로 전송될 때 넘겨지는 값입니다. 그리고 selected 속성으로 기본 선택 항목 값을 지정할 수도 있습니다.

마지막으로 여러 줄을 입력 가능하게 하는 <textarea> 태그에 대해 살펴봅니다. name 속성은 다른 요소와 구분하기 위해 텍스트 영역 이름을 의미하며 cols 속성은 가로(문자 수), rows는 세로의 크기(줄 수)를 의미합니다.

<textarea name="multitext" cols="50" row="5">

화살표 삼각형을 드래그하면 텍스트 영역 크기를 조절할 수 있습니다.

---

웹 페이지에서 사용자 입력을 다양하게 받을 수 있는 것을 살펴봤습니다. 어떠한 원리로 작동되는지 기능 위주로 살펴보고 실제 웹페이지를 만들 때는 기존 잘 만들어진 HTML 템플릿을 이용하여 수정 보강할 예정입니다. 어느 정도 기초 문법만 이해한다면 구글링만으로도 양질의 HTML 작성을 충분히 해내리라 생각합니다.