JeroCaller

쌓여만 가는 빈 캔

3 분 소요

<input> 태그의 속성들

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>로그인</legend>
            <ul type="none">
                <li>
                    <input type="text" 
                    value="로그인을 위해 아이디와 비밀번호를 입력하세요."
                    readonly size="40">
                </li>
                <li>
                    <label for="log_id">ID </label>
                    <input type="text" 
                    id="log_id" autofocus placeholder="아이디 입력" required>
                </li>
                <li>
                    <label>PW <input type="password" required></label>
                </li>
            </ul>
            <input type="submit" value="로그인">
        </fieldset>
    </form>
</body>
</html>

예제 1-1 실행결과

예제 1-1 실행결과

위 예제 1-1에서 하나씩 살펴보겠다.

autofocus

해당 속성은 사용자가 처음 웹 페이지에 들어갔을 때 사용자가 정보를 입력해야하는 텍스트 창(또는 그 외 <input> 태그로 생성할 수 있는 폼 요소들)에 자동으로 마우스가 클릭되어 입력 상태로 만들어주는 속성이다. 만약 해당 속성이 설정되어 있지 않다면 사용자는 일일이 해당 폼 요소에 마우스를 클릭하여 해당 입력칸을 활성화시킨 후에야 정보를 입력할 수 있을 것이다.

그림 1. ID 텍스트 창에 autofocus 속성을 적용한 결과. 자세히 보면 ID 텍스트 입력칸 테두리가 두꺼운 것을 볼 수 있다. 이 상태에서 키보드 입력을 하면 그대로 해당 입력칸에 텍스트가 입력된다.

그림 1. ID 텍스트 창에 autofocus 속성을 적용한 결과. 자세히 보면 ID 텍스트 입력칸 테두리가 두꺼운 것을 볼 수 있다. 이 상태에서 키보드 입력을 하면 그대로 해당 입력칸에 텍스트가 입력된다.

해당 속성에는 따로 속성값 없이 해당 속성 자체만으로 사용한다.

placeholder

해당 속성은 텍스트 입력칸에 해당 칸에 무엇을 입력해야하는지 설명해주는 텍스트를 띄우는 기능이다. 뿐만 아니라 사용자가 해당 입력칸을 클릭하고 텍스트를 입력하면 해당 텍스트가 사라진다. 위 그림 1의 ID 텍스트 입력칸의 “아이디 입력”이 그 예이다. <input> 태그 안에 placeholder=”원하는 텍스트” 형식으로 입력하면 된다.

readonly

해당 속성은 <input> 태그로 만들어진 폼 요소에 사용자가 입력을 하지 못하게 하고, 오로지 읽는 용도로만 사용할 수 있도록 설정하는 속성이다.<input> 태그 안에 readonly만 작성해도 설정된다. 위 그림 1의 맨 위 입력창(”로그인을 위해 아이디와 비밀번호를 입력하세요”)을 클릭하여 키보드로 텍스트를 입력하거나 지우려고 해도 전혀 먹히지 않는다.

required

해당 속성은 사용자가 반드시 입력해야만 하는 <input> 폼 요소에 적용시킬 수 있으며, <input type=”submit”> 태그와 함께 쓰이면 required 속성이 적용된 폼 요소에 사용자가 아무것도 입력하지 않은 상태에서 제출 버튼을 누르면 해당 입력칸을 먼저 입력하라는 메시지가 뜨면서 제출을 거절한다.

그림 2. required 속성이 적용된 <input> 태그로 만들어진 텍스트 입력칸에 아무것도 입력하지 않고 “로그인” 버튼을 누른 순간 나타난 메시지

그림 2. required 속성이 적용된 <input> 태그로 만들어진 텍스트 입력칸에 아무것도 입력하지 않고 “로그인” 버튼을 누른 순간 나타난 메시지

실험 결과, 일반적인 <input type=”button”> 태그만으로는 위 메시지가 뜨지 않고, 오로지 “submit” 버튼만 위 그림 2와 같이 실행된다.

해당 속성은 <input> 태그 안에 속성값 없이 그대로 required 속성만 입력하면 적용된다.

<input> 태그 외의 폼 태그들

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>오늘의 일기</legend>
            <div>
                <label for="weather">오늘 날씨</label>
                <select id="weather">
                    <option value="clear" selected>맑음</option>
                    <option value="cloudy">흐림</option>
                    <option value="rain">비</option>
                    <option value="snow">눈</option>
                </select>
            </div>
            <div>
                <label for="feeling">오늘의 기분</label>
                <input type="text" id="feeling" list="f_list">
                <datalist id="f_list">
                    <option value="good">좋음</option>
                    <option value="happy">행복함</option>
                    <option value="angry">화남</option>
                    <option value="sad">슬픔</option>
                </datalist>
            </div>
            <div>
                <div>
                    <label for="diary">일기 작성</label>
                </div>
                <div>
                    <textarea id="diary" cols="50" rows="20"></textarea>
                </div>
            </div>
        </fieldset>
    </form>
</body>
</html>

예제 2-1 실행결과. 실행 후 항목 선택 및 텍스트를 따로 입력하였다.

예제 2-1 실행결과. 실행 후 항목 선택 및 텍스트를 따로 입력하였다.

<select>, <option> 태그로 드롭다운 만들기

위 예제 2-1에서 발췌한 다음 코드를 보자.

<select id="weather">
    <option value="clear" selected>맑음</option>
    <option value="cloudy">흐림</option>
    <option value="rain">비</option>
    <option value="snow">눈</option>
</select>

예제 2-2 실행결과 첫 모습.

예제 2-2 실행결과 첫 모습.

예제 2-2 실행결과 드롭다운 선택 모습

예제 2-2 실행결과 드롭다운 선택 모습

<select> 태그로 전체적인 드롭다운 틀을 만들고, 해당 태그 안에 <option> 태그를 통해 해당 드롭다운에 넣을 항목들을 하나씩 넣을 수 있다. 해당 드롭다운을 웹에서 보면 위와 같이 화살표를 클릭하면 목록이 아래로 떨어지듯 나타나고 그 중에 원하는 항목을 선택할 수 있다.

<select> 태그에는 다음의 속성들을 사용할 수 있다.

  • size: 기본적으로는 드롭다운 항목이 화면에 표시되는 항목수는 1개이나 해당 속성을 통해 그 이상으로 늘릴 수 있다. 다음은 <select size=”2”>로 설정했을 때의 드롭다운 모습이다.

    그림 3

    그림 3

  • multiple: 기본적으로는 드롭다운에서 단 하나의 항목만을 선택할 수 있으나, multiple 속성을 사용하면 화면에 보이는 드롭다운 항목이 리스트로 보이며(항목이 많을 경우 스크롤을 통해 다른 항목들도 확인할 수 있다), 거기서 Ctrl + 마우스 클릭을 통해 여러 개의 항목들을 선택할 수 있다. 해당 속성은 속성값없이 multiple이란 속성만 작성해도 적용된다.

    그림 4. <select> 태그에 multiple 속성을 적용한 결과. 여러 항목을 동시에 선택할 수 있다.

    그림 4. <select> 태그에 multiple 속성을 적용한 결과. 여러 항목을 동시에 선택할 수 있다.

<option> 태그에 사용할 수 있는 속성에는 다음이 있다.

  • value: 해당 항목에 연결할 값으로, 서버에 전송할 때 필요하다.
  • selected: 이 속성이 적용된 <option> 태그 항목이 화면에 표시된다. (예제 2-2 참고)

<datalist>로 데이터 목록 만들기

<label for="feeling">오늘의 기분</label>
<input type="text" id="feeling" list="f_list">
<datalist id="f_list">
    <option value="good">좋음</option>
    <option value="happy">행복함</option>
    <option value="angry">화남</option>
    <option value="sad">슬픔</option>
</datalist>

예제 2-3 실행결과

예제 2-3 실행결과

사용자가 입력할 텍스트 창에 미리 정의해둔 여러 항목들을 데이터 목록으로 만들어 이를 연결시켜 놓으면 사용자는 해당 데이터 목록 중에 하나를 선택하여 좀 더 쉽게 정보를 입력할 수 있다. 이 데이터 목록을 만들어주는 태그가 <datalist>이다. <select> 태그와 마찬가지로, 해당 태그 안에도 <option> 태그를 통해 각각의 데이터 항목을 생성하면 된다. 이렇게 만든 <datalist> 태그는 이를 연결할 텍스트 창 태그 <input type=”text”> 에서 list 속성값에 <datalist>의 id 속성값을 대입하면 <input> 태그로 만든 텍스트 창과 데이터 목록이 연결되어 위 사진과 같은 결과를 얻을 수 있다.

<button> 태그로도 버튼을 만들 수 있다

위 예제 2-1에는 나와있지 않지만, <button> 태그로도 버튼을 만들 수 있다.

<button type="submit"></button>  <!-- <input type="submit">-->
<button type="reset"></button>    <!-- <input type="reset">-->
<button type="button"></button>    <!-- <input type="button"> -->

References

[1] 고경희 - Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석

This content is licensed under CC BY-NC 4.0

댓글남기기

참고