HTML input types(입력유형)
input types text
<input type="text">, 한 줄의 텍스트 입력필드를 정의한다.
<form>
<label for="fname">이름:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">성:</label><br>
<input type="text" id="lname" name="lname">
</form>
input types password
<input type="password">, 비밀번호 입력필드를 정의한다.
<form>
<label for="username">사용자 ID:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">비밀번호:</label><br>
<input type="password" id="pwd" name="pwd">
</form>password type의 경우 사용자가 데이터를 입력하면 다음과 같이 입력된 내용이 공개되지 않도록 마스킹 처리된다.
마스킹처리된 사용자 입력값은 별표 또는 원으로 표시된다.
input types submit
<input type="submit">, 사용자가 입력한 양식데이터(form data)를 양식핸들러(form handler)에 전달하기 위한 버튼을 정의한다.
form handler는 클라이언트로부터 입력된 데이터를 처리하기 위한 스크립트가 있는 서버페이지를 말하며
form handler는 form의 action 속성에 지정된다.
<form action="form_ok.php">
<label for="fname">이름:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">성:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
위의 실행모습에서처럼 데이터를 입력하고 submit 버튼을 클릭하면 코드에서 action 속성으로 지정한 form_ok.php로 사용자 입력데이터가 전달된다.
만약 아래의 코드처럼 submit 버튼의 value 속성값을 생략한다면
<form action="form_ok.php">
<label for="fname">이름:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">성:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
다음과 같이 버튼에 기본으로 지정되어 있는 텍스트가 나타난다.
input types reset
<input type="reset">, 모든 form의 값을 기본으로 재설정하는 재설정(reset) 버튼을 정의한다.
<h2> Reset Button </h2>
<p> 모든 form 요소의 값을 초기화 하는 reset 버튼을 추가함. </p>
<form action="form_ok.php">
<label for="fname">이름:</label><br>
<input type="text" id="fname" name="fname" value="길동"><br>
<label for="lname">성:</label><br>
<input type="text" id="lname" name="lname" value="홍"><br><br>
<input type="submit">
<input type="reset">
</form>
위와 같이 텍스트필드에 초기화 값과 다른 값이 입력된 상황에서 초기화 버튼을 클릭하면
다음과 같이 초기에 텍스트 필드에 지정한 값으로 초기화 되는 것을 확인할 수 있다.
input types radio
<input type="radio">, 라디오 버튼을 정의한다.
라디오 버튼을 사용하면 여러개의 옵션/선택지에서 하나만을 선택할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p><strong>가장 좋아하는 캐릭터 한 가지만</strong>선택해 주세요.</p>
<form action="form_ok.php">
<input type="radio" id="라이언" name="캐릭터" value="라이언">
<label for="라이언">라이언</label><br>
<input type="radio" id="브라운" name="캐릭터" value="브라운">
<label for="브라운">브라운</label><br>
<input type="radio" id="어피치" name="캐릭터" value="어피치">
<label for="어피치">어피치</label><br><br>
<input type="submit">
</form>
</body>
</html>
다음과 같이 여러개의 항목 중에서 한가지만 선택할 수 있는 형식을 구현할 수 있다.
input types checkbox
<input type="checkbox">, 확인란을 정의한다.
checkbox를 사용하면 여러개의 항목 중에서 원하는 특정 항목들을 체크할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>다음 중 <strong>자신에게 해당하는 사항을</strong>체크해주세요.</p>
<form action="form_ok.php">
<input type="checkbox" id="항목1" name="항목1" value="전공">
<label for="vehicle1"> 나는 컴퓨터 공학을 전공했다.</label><br>
<input type="checkbox" id="항목2" name="항목2" value="취미">
<label for="vehicle2"> 나의 취미는 축구이다.</label><br>
<input type="checkbox" id="항목3" name="항목3" value="노트북">
<label for="vehicle3"> 나는 개인용 pc를 3개 이상 가지고 있다.</label><br>
<input type="checkbox" id="항목4" name="항목4" value="악기">
<label for="vehicle4"> 나는 연주할 수 있는 악기가 있다.</label><br>
<input type="checkbox" id="항목5" name="항목5" value="수면시간">
<label for="vehicle5"> 나는 충분히 수면시간을 가지는 편이다.</label><br>
<br>
<input type="submit">
</form>
</body>
</html>
다음과 같이 확인란(checkbox)를 활용하고자 하는 곳에 사용할 수 있다.
input types button
<input type="button">, 클릭할 수 있는 버튼을 정의한다.
<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('반갑습니다!')" value="저를 클릭해보세요!">
</body>
</html>
다음과 같이 클릭할 수 있는 버튼을 통해서 버튼이 클릭된 경우에 이에 대한 적절한 동작을 수행할 수 있도록 구성할 수 있다.
input types color
<input type="color">, 색상을 포함해야하는 입력필드에 사용한다.
사용하는 웹브라우져의 지원여부에 따라서 색상선택기가 입력필드에 표시될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Show a Color Picker</h2>
<p><strong>가장 좋아하는 색상을</strong>선택해주세요.</p>
<form action="form_ok.php">
<label for="favcolor">가장 좋아하는 색상을 선택해주세요:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<input type="submit">
</form>
</body>
</html>
다음과 같이 사용자가 색상을 선택할 수 있는 색상 선택기(color picker)가 나타난다.
input types date
<input type="date">, 날짜를 포함해야하는 입력필드에 사용된다.
사용하는 웹브라우져의 지원여부에 따라서 날짜선택기가 입력필드에 표시될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<p><strong>자신의 생년월일</strong>을 입력해 주세요</p>
<form action="form_ok.php">
<label for="birthday">생년월일:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit">
</form>
</body>
</html>
그리고 여기에 mix, max 속성을 추가해서 사용자가 선택하는 날짜에 제한을 줄 수도 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Date Field Restrictions</h2>
<p>min, max 속성을 이용해서 날짜의 선택범위를 제한</p>
<form action="form_ok.php">
<label for="datemax">1980-01-01 이전의 날짜를 선택해 주세요:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">2000-01-01 이후의 날짜를 선택해 주세요:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
input types datetime-local
<input type="datetime-local">, 시간대의 개념을 적용하지 않고 단순히 날짜 및 시간 입력필드를 지정한다.
웹브라우져의 지원 여부에 따라서 날짜 선택기가 입력필드에 표시될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>
<p>현재 날짜 및 시간을 입력해 주세요.</p>
<form action="form_ok.php">
<label for="currentDayTime"> 현재 날짜 및 시간 :</label>
<input type="datetime-local" id="currentDayTime" name="currentDayTime">
<input type="submit">
</form>
</body>
</html>
input types email
<input type="email">, 이메일 주소를 포함해야하는 입력필드에 사용된다.
웹브라우져의 지원 여부에 따라서 이메일주소는 제출 시 자동으로 검증될 수도 있다.
일부 스마트폰에서는 email 유형을 인식해서 스크린키보드에 이메일 주소입력을 위한 .com을 추가하여 띄워주기도 한다.
<!DOCTYPE html>
<html>
<body>
<h2>Email Field</h2>
<p>사용할 이메일 주소를 입력해주세요.</p>
<form action="form_ok.php">
<label for="email">이메일 주소 입력:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
</body>
</html>
input types file
<input type="file">, 파일선택필드와 파일업로드를 위한 "찾아보기" 버튼을 정의한다.
<!DOCTYPE html>
<html>
<body>
<h1>File upload</h1>
<p>업로드할 파일을 선택해주세요.</p>
<form action="form_ok.php">
<label for="myfile">업로드파일 선택:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>
</body>
</html>
input types month
<input type="month">, 사용자가 월 및 연도를 선택하도록 할 때 사용한다.
웹브라우져의 지원에 따라서 날짜입력기가 입력필드에 표시될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<p>카드유효기간 마감일을 입력해주세요.</p>
<form action="form_ok.php">
<label for="bdaymonth">유효기간 마감일(yyyy-mm):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit">
</form>
</body>
</html>
input types number
<input type="number">, 숫자를 입력받는 입력필드를 정의한다.
선택할 수 있는 숫자의 범위를 제한할 수도 있다.
아래의 코드 예시는 사용자가 1에서 100 사이의 수를 선택하여 입력하도록 제한한 예시이다.
<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<p>1에서 100사이의 수를 선택하여 입력해주세요.</p>
<form action="form_ok.php">
<label for="quantity">입력 수(1~100):</label>
<input type="number" id="quantity" name="quantity" min="1" max="100">
<input type="submit">
</form>
</body>
</html>
마우스 클릭을 이용하여 값을 증가시키거나 감소시킬 수 있고 설정한 범위 밖으로 증가 또는 감소시키려는 경우 더 이상 증감이 일어나지 않는다. 그리고 키보드로 설정한 범위 밖의 값을 입력하는 경우 다음과 같이 설정범위를 벗어난 값임을 토글 형식으로 알려준다.
input type range
<input type="range">, 정확한 값의 입력이 중요하지 않은 숫자를 입력하기 위한 컨트롤을 정의한다.
즉, 값의 변화에 의미를 두는 것이지 각 값의 정확한 값에 크게 의미를 두지 않는 경우 사용할 수 있는 type이다.
주로 슬라이더바를 이용한 컨트롤로 구현되며, 1~100을 기본설정 범위로 한다.
그러나 min, max 또는 step 속성을 이용해서 허용되는 숫자에 대한 제한을 설정할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<p>0에서 300사이의 값을 표현하는 슬라이더바를 출력합니다.<p>
<form action="form_ok.php" method="get">
<label for="vol">현재 값 (0~300):</label>
<input type="range" id="vol" name="vol" min="0" max="300">
<input type="submit">
</form>
</body>
</html>
input type search
<input type="search">, 검색필드를 정의하는 데 사용한다.
검색필드는 일반 텍스트필드처럼 동작한다.
<!DOCTYPE html>
<html>
<body>
<h2>Search Field</h2>
<p>검색할 내용을 입력해주세요.</p>
<form action="form_ok.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit">
</form>
</body>
</html>
실제로 사용해보면 일반 텍스트필드와 동일하게 동작함을 확인할 수 있다.
아직 검색해야할 영역, 대상 등에 대한 설정을 하지 않았기 때문에 실제로 검색이 진행되지는 않는다.
input type tel
<input type="tel">, 전화번호를 포함해야하는 입력필드에 사용된다.
<!DOCTYPE html>
<html>
<body>
<h2>Telephone Field</h2>
<p>사용중인 휴대전화 번호를 입력해주세요.</p>
<form action="form_ok.php">
<label for="phone">휴대전화번호 입력 : </label><br><br>
<input type="tel" id="phone" name="phone" placeholder="010-0000-0000" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" required><br><br>
<small>Format: 010-0000-0000</small><br><br>
<input type="submit">
</form>
</body>
</html>
코드 내에서 전화번호 입력형식을 어떠한 방식으로 지정하는 지 잘 봐두도록 하자.
input type time
<input type="time">, 시간대 개념을 적용하지 않고 단순히 시간값을 선택할 수 있도록 한다.
웹브라우져 지원에 따라서 입력필드에 시간선택기가 표시될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h1>Show a Time Input Control</h1>
<p>예약 시간을 선택해 주세요.</p>
<form action="form_ok.php">
<label for="appt">예약시간 선택</label>
<input type="time" id="appt" name="appt">
<input type="submit">
</form>
</body>
</html>
input type URL
<input type="url">, URL 주소를 포함하는 입력필드에 사용된다.
웹브라우져의 지원 여부에 따라서 이메일주소는 제출 시 자동으로 검증될 수도 있다.
일부 스마트폰에서는 email 유형을 인식해서 스크린키보드에 이메일 주소입력을 위한 .com을 추가하여 띄워주기도 한다.
(email의 경우와 동일하게 적용된다.)
<!DOCTYPE html>
<html>
<body>
<h1>Display a URL Input Field</h1>
<p>현재 운영하고 있는 기술블로그 주소를 입력하세요.</p>
<form action="form_ok.php">
<label for="homepage">기술블로그 주소:</label>
<input type="url" id="homepage" name="homepage">
<input type="submit">
</form>
</body>
</html>
input type week
<input type="week">, 사용자가 주차 및 연도를 선택할 수 있도록 한다.
웹브라우져 지원에 따라서 날짜 선택기가 입력필드에 표시될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h1>Display a Week Input Control</h1>
<p>캠프에 참여할 주차를 선택해주세요.</p>
<form action="form_ok.php">
<label for="week">캠프참여 주차:</label>
<input type="week" id="week" name="week">
<input type="submit">
</form>
</body>
</html>
내용들이 다소 많았다.
지금까지 살펴본 내용들을 정리해보자
| 유형(Type) | 내용 |
| <input type="button"> | 클릭할 수 있는 버튼 정의 |
| <input type="checkbox"> | 확인란(checkbox) 정의 |
| <input type="color"> | 색상값을 포함해야하는 입력필드 정의 |
| <input type="date"> | 날짜를 포함해야하는 입력필드 정의 |
| <input type="datetime-local"> | 날짜 및 시간을 포함해야하는 입력필드 정의(시간대X) |
| <input type="email"> | 이메일 주소를 포함해야하는 입력필드 정의 |
| <input type="file"> | 파일선택필드를 위한 파일찾기 버튼 정의 |
| <input type ="hidden"> | - |
| <input type="image"> | - |
| <input type="month"> | 연도 및 월을 포함해야하는 입력필드 정의(시간대X) |
| <input type="number"> | 숫자를 입력받는 입력필드 정의 |
| <input type="password"> | 비밀번호 입력필드 정의 |
| <input type="radio"> | radio 버튼 정의(1개만 선택할 수 있는 버튼) |
| <input type="range"> | 정확한 값의 입력이 중요하지 않는 숫자를 입력받는 입력필드 정의 |
| <input type="reset"> | 모든 form요소의 값을 기본으로 재설정하는 버튼정의 |
| <input type="search"> | 검색을 위한 입력필드 정의 |
| <input type="submit"> | 사용자 입력데이터를 from handler로 전달하는 버튼 정의 |
| <input type="tel"> | 전화번호를 포함해야하는 입력필드 정의 |
| <input type="text"> | 한 줄의 텍스트 입력필드 정의 |
| <input type="time"> | 시간값을 포함해야하는 입력필드 정의(시간대X) |
| <input type="url"> | URL 주소를 포함해야하는 입력필드 정의 |
| <input type="week"> | 주차 및 연도값을 포함해야하는 입력필드 정의 |
'Web Basic > HTML' 카테고리의 다른 글
| HTML Video(비디오) (0) | 2020.07.23 |
|---|---|
| HTML Multimedia(멀티미디어) (0) | 2020.07.23 |
| HTML Form Elements (0) | 2020.07.21 |
| HTML forms (0) | 2020.07.21 |
| Block & Inline 요소 (0) | 2020.07.20 |