구글의 검색 창, 인스타그램의 로그인 창 등은 모두 input태그로 만들어졌다.
input태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다.
input태그는 매우 다양한 입력 형태로 만들 수 있다. input태그에서 입력 형태를 지정할 때 type속성을 사용한다.
| 종류 | 설명 |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트박스를 넣습니다. |
| passward | 비밀번호를 입력할 수 있는 필드를 넣습니다 |
| search | 검색할 때 입력하는 필드를 넣습니다 |
| url | URL주소를 입력할 수 있는 필드를 넣습니다 |
| 이메일 주소를 입력할 수 있는 필드를 넣습니다 | |
| 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>
'📁Web Developing > HTML 기초' 카테고리의 다른 글
| input 태그-3 (number, range) (0) | 2022.05.30 |
|---|---|
| input 태그-2 (버튼) (0) | 2022.05.30 |
| 폼 삽입하기 (0) | 2022.05.29 |
| 하이퍼링크 삽입하기 (0) | 2022.05.29 |
| 멀티미디어 컨텐츠 삽입하기 (0) | 2022.05.29 |
댓글