폼 관련 태그들 - <input> 태그의 다양한 속성

폼 관련 태그들 - <input> 태그의 다양한 속성

1. autofocus 속성 - 입력 커서 표시하기

• autofocus 속성을 사용하면 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있습니다.
• 웹 문서를 켜면 바로 원하는 요소에 입력할 수 있도록 마우스 커서가 표시됩니다.

 

이름 비밀번호

 

<div class="exam1" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <label class="ex1" for="uname">이름</label>
    <input type="text" id="uname" autofocus required>
    <label>비밀번호 <input type="password"></label>
</div>

2. placeholder 속성 - 힌트 표시하기

• placeholder 속성을 사용하면 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에는 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있습니다.
• 이 속성을 사용하면 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어 편리합니다.

 

전화번호

 

<div class="exam2" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <label class="ex2" for="phone">전화번호</label>
    <input type="text" id="phone" placeholder="하이픈없이 입력">
</div>

3. readonly 속성 - 읽기 전용 필드 만들기

• readonly 속성을 사용하면 입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만들 수도 있습니다.
• 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있지만 사용자에게 내용을 보여 주기만 하고 입력은 할 수 없게 합니다.
• readonly 속성은 "true"나 "false" 값 중 하나만 사용하기 때문에 속성과 함께 true나 false 값을 지정해도 되고 간단히 readonly라고만 쓰거나 readonly="readonly"라고 써도 readonly="true"로 인식합니다.

 

HTML 기초

 

<div class="exam3" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <label class="ex3" for="html">HTML 기초</label>
    <input type="text" id="html" value="오전 10:00~12:00" readonly>
</div>

4. required 속성 - 필수 필드 지정하기

• 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데 이떄 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 합니다.
• 필수적으로 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있습니다.
• required 속성은 불린 값(boolean value)이기 때문에 이 속성을 사용하려면 required="required" 또는 required라고만 입력하면 됩니다.
• 만약 필수 필드로 지정한 이름 필드를 비워놓고 submit 버튼을 눌러 전송할 경우 오류 메시지를 표시합니다. 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저마다 다르게 나타납니다.

 

이름

 

<div class="exam4" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <form action="register.php" method="post">
        <label class="ex4" for="uname">이름</label>
        <input type="text" id="uname" autofocus required>
        <input type="submit" value="제출">    
    </form>    
</div>

5. min, max, step 속성

• min 속성과 max 속성은 각각 해당 필드의 최솟값과 최댓값을 지정합니다. 이때 한 가지 속성만 지정할 수도 있지만 두 가지 속성을 함께 서서 최솟값과 최댓값을 모두 지정해 사용자가 입력할 수 있는 값의 범위를 제한할 수도 있습니다.
• step 속성은 허용된 범위 내의 숫자의 일정한 간격을 가리킵니다.
• 세 가지 속성 모두 <input> 태그의 유형이 date 이거나 datetime, datetime-local, month, week, time, number, range일 경우에만 사용할 수 있습니다.
• 아래 예제는 기본값과 최솟값을 10으로 하고 최댓값을 100으로 하면서 step를 10으로 했기 때문에 스핀 박스를 클릭할 때마다 10만큼씩 커집니다.

 

단체주문

 

<div class="exam5">
    <label class="ex5" for="group">단체주문</label>
    <input type="number" id="group" value="10" min="10" max="100" step="10">
</div>

6. size, minlength, maxlength 속성 - 길이, 최소 길이, 최대 길이 속성

• size 속성은 텍스트 필드와 비밀번호 필드, 검색 필드 등 한 줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정합니다.
• maxlength 속성은 사용자가 최대 몇 글자까지 입력할 수 있는지, minlength 속성은 사용자가 최소 몇 글자 이상을 입력해야 하는지를 지정합니다.

 

아이디: 4~15자리 이내의 영문과 숫자

 

<div class="exam6" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <label>아이디: <input type="text" id="user_id" minlength="4" maxlength="15"></label>
    <small style="color: red">4~15자리 이내의 영문과 숫자</small>
</div>

7. <input> 태그에서 사용할 수 있는 속성들

속 성	설 명
formaction	실행할 프로그램을 연결합니다. type="submit"이나 type="image"일 때 사용할 수 있습니다.
formenctype	서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정합니다. type="submit"이나 type="image"일 때 사용할 수 있습니다.
formmethod	서버로 전송하는 방식(get, post 등)을 지정합니다. 이미 <form>태그 안에서 지정한 방식이 있어도 그 방식은 무시됩니다.
formnovalidate	<form>태그 안에 novalidate 라는 속성이 있어서 서버로 전송할 때 폼 데이터가 유효(validate)한지 여부를 표시할 수 있는데 <input> 태그 안에서도 formnovalidate 속성을 이용해 유효성 여부를 표시할 수 있습니다.
formtarget	폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정합니다.
height, width	type="image"일 때 이미지의 너비와 높이를 지정합니다.
list	<datalist>에 미리 정의해 놓은 옵션 값을 <input>안에 나열해 보여 줍니다.
multiple	type="email"이나 type="file"일 때 두 개 이상의 값을 입력합니다. <input> 태그 안에 속성 이름만 표시하면 됩니다.