input 태그-1 (텍스트 입력)

Hush 2022. 5. 30. 09:08

구글의 검색 창, 인스타그램의 로그인 창 등은 모두 input태그로 만들어졌다.

input태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다.

input태그는 매우 다양한 입력 형태로 만들 수 있다. input태그에서 입력 형태를 지정할 때 type속성을 사용한다.

종류	설명
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트박스를 넣습니다.
passward	비밀번호를 입력할 수 있는 필드를 넣습니다
search	검색할 때 입력하는 필드를 넣습니다
url	URL주소를 입력할 수 있는 필드를 넣습니다
email	이메일 주소를 입력할 수 있는 필드를 넣습니다
tel	전화번호를 입력할 수 있는 필드를 넣습니다
checkbox	주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다.
radio	주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다
number	숫자를 조절할 수 있는 스핀 박스를 넣습니다
range	숫자를 조절할 수 있는 슬라이드 막대를 넣습니다
date	사용자 지역을 기준으로 날짜(연, 월, 일)을 넣습니다.
month	사용자 지역을 기준으로 날짜(연, 월)을 넣습니다
week	사용자 지역을 기준으로 날짜(연, 주)fmf sjgtmqslek
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)를 넣습니다
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월,일, 시, 분, 초, 분할 초)를 넣습니다
datetime-cloal	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣습니다
submit	전송 버튼을 넣습니다
reset	리셋 버튼을 넣습니다
image	submit 버튼 대신 사용할 이미지를 넣습니다
button	일반 버튼을 넣습니다
file	파일을 첨부할 수 있는 버튼을 넣습니다
hidden	사용자에게는 보이지 않지만 서버로 넘겨주는 값이 잇는 필드를 만듭니다.

자주 쓰는것들을 하나씩 살펴보기로 하자.

텍스트와 비밀번호 : type="text" , type="passward"

이 두 타입은 일반 텍스트를 입력할 때 사용하며, 입력값이 화면에 보이는지, 다른 문자로 대체되는지의 차이만 있다.

텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성은 다음과 같다

종류	설명
size	필드의 길이를 지정합니다. 즉, 화면에 몇 글자가 보이도록 할 것인지를 지정합니다. 보이는 글자의 최댓값이지 , 입력 가능한 글자수의 최댓값은 아닙니다.
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용입니다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됩니다. 비밀번호 필드에서 사용하지 않는 속성입니다.
maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정합니다

이를 활용하여 간단하게 로그인 폼을 만들어 보자.

id 입력칸, pw입력칸, 그리고 로그인 버튼을 만들었다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <fieldset>
                <label>ID <input type="text" id="user_id" size="10"></label>
                <label>PW <input type="passward" id="user_pw" size="10"></label>
                <input type="submit" value="Sign in">
            </fieldset>
        </form>
    </body>
</html>

용도에 맞게 사용하는 search, url, email, tel type

이 네 개의 필드들은 앞서 본 텍스트 필드와 거의 같은 속성을 사용한다.

겉모습은 텍스트 필드와 유사하지만 목적에 맞는 여러 기능을 제공한다.

type="search"를 사용하면 텍스트를 입력했을 때 오른쪽에 X표시가 표시되어 쉽게 검색어를 지울 수 있다.

type="url"은 입력받은 텍스트가 웹 주소임을 알 수 있다.

type="email"은 입력받은 텍스트가 이메일 주소임을 알 수 있다.

type="tel"은 모바일에서 바로 전화를 걸 수 있도록 해준다.

이외에도 모바일에서 가상 키보드배열이 바뀌는 등, 용도에 맞게 사용하면 여러 이점을 누릴 수 있다.

예시를 보자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <fieldset>
                <ul>
                    <li>
                        <label for="search">Search</label>
                        <input type="search" id="search">
                    </li>
                    <li>
                        <label for="url">Url</label>
                        <input type="url" id="url">
                    </li>
                    <li>
                        <label for="email">Email</label>
                        <input type="email" id="email">
                    </li>
                    <li>
                        <label for="tel">Tel.</label>
                        <input type="tel" id="tel">
                    </li>
                </ul>
            </fieldset>
        </form>
    </body>
</html>

저작자표시 (새창열림)