HTML input 유형-4

이 장에서는 HTML <input> 요소의 다양한 유형에 대해 설명한다.

HTML input 유형

HTML에서 사용할 수 있는 다양한 입력 유형은 다음과 같다:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

HTML input 유형 속성

속성	설명
checked	페이지를 로드할 때 입력 필드를 미리 선택하도록 지정합니다(유형="adio" 또는 유형="radio")
disabled	입력 필드를 사용할 수 없도록 지정합니다
max	입력 필드의 최대값을 지정합니다
maxlength	입력 필드의 최대 문자 수를 지정합니다
min	입력 필드의 최소값을 지정합니다
pattern	입력 값을 확인할 정규식을 지정합니다
readonly	입력 필드를 읽기 전용으로 지정합니다(변경할 수 없음)
required	입력 필드가 필요함(입력해야 함)을 지정합니다
size	입력 필드의 너비(문자)를 지정합니다
step	입력 필드의 법적 번호 간격을 지정합니다
value	입력 필드의 기본값을 지정합니다

다음 장에서는 입력 제한에 대해 자세히 알아볼 것이다.

다음 예제에서는 0에서 100 사이의 값을 10단계로 입력할 수 있는 숫자 입력 필드를 표시한다. 기본값은 30이다:

<!DOCTYPE html>
<html>
<body>

<h2>Numeric Steps</h2>

<p>브라우저 지원에 따라: 입력 필드에 고정 단계가 적용됩니다.</p>

<form action="/action_page.php">
  <label for="quantity">양:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input 유형 : range

<input type="range">는 정확한 값이 중요하지 않은 숫자를 입력하기 위한 컨트롤을 정의한다(슬라이더 컨트롤처럼). 기본 범위는 0 ~ 100이다. 그러나 min, max 및 step 속성으로 허용되는 숫자에 대한 제한을 설정할 수 있다:

<!DOCTYPE html>
<html>
<body>

<h2>Range 필드</h2>

<p>브라우저 지원에 따라: 입력 유형 "범위"는 슬라이더 컨트롤로 표시할 수 있습니다.</p>

<form action="/action_page.php" method="get">
  <label for="vol">볼륨 (0 ~ 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input 유형 : search

<input type="search">는 검색 필드에 사용된다(검색 필드는 일반 텍스트 필드처럼 작동함).

<!DOCTYPE html>
<html>
<body>

<h2>Search 필드</h2>
<p><strong>입력 유형="search"</strong>은 검색 필드(일반 텍스트 필드와 유사)에 사용됩니다:</p>

<form action="/action_page.php">
  <label for="gsearch">구글 검색:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input 유형 : tel

<input type="tel">은 전화 번호를 포함해야 하는 입력 필드에 사용된다.

<!DOCTYPE html>
<html>
<body>

<h2>Telephone 필드</h2>

<p><strong>입력 유형="tel"/<strong>은 전화 번호를 포함해야 하는 입력 필드에 사용됩니다:</p>

<form action="/action_page.php">
  <label for="phone">전화번호를 입력하세요:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>형식: 123-45-678</small><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input 유형 : time

<input type="time">은 사용자가 시간(시간대 없음)을 선택할 수 있도록 한다.

브라우저 지원에 따라 입력 필드에 시간 선택기가 나타날 수 있다.

<!DOCTYPE html>
<html>
<body>

<h1>Time Input Control</h1>

<p><strong>입력 유형="time"<strong>을 사용하면 시간을 선택할 수 있습니다(시간대 없음):</p>

<p>브라우저에서 지원하는 경우 입력 필드를 입력할 때 시간 선택기가 나타납니다.</p>

<form action="/action_page.php">
  <label for="appt">시간을 선택핫요:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit" value="Submit">
</form>

<p><strong>참고: Internet Explorer 11 또는 이전 Safari 14.1에서는 유형="시간"이 지원되지 않습니다.</p>

</body>
</html>

HTML input 유형 : url

<input type="url">은 URL 주소를 포함해야 하는 입력 필드에 사용된다.

브라우저 지원에 따라 제출 시 url 필드의 유효성을 자동으로 검사할 수 있다.

일부 스마트폰은 URL 유형을 인식하고, 키보드에 ".com"을 추가하여 URL 입력과 일치시킨다.

<!DOCTYPE html>
<html>
<body>

<h1>URL Input 필드 표시</h1>

<p><strong>입력 유형="url"</strong>은 URL 주소를 포함해야 하는 입력 필드에 사용됩니다:</p>

<form action="/action_page.php">
  <label for="homepage">홈페이지 추가:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input 유형 : week

<input type="week">를 사용하면 주 및 연도를 선택할 수 있다.

브라우저 지원에 따라 입력 필드에 달력 보기가 나타날 수 있다.

<!DOCTYPE html>
<html>
<body>

<h1>Week Input Control 표시</h1>

<p><strong>input type="week"<strong>을 사용하면 주 및 연도를 선택할 수 있습니다.</p>

<p>브라우저에서 지원하는 경우 입력 필드를 입력할 때 달력 보기가 나타납니다.</p>

<form action="/action_page.php">
  <label for="week">주를 선택하세요:</label>
  <input type="week" id="week" name="week">
  <input type="submit" value="Submit">
</form>

<p><strong>참고: Firefox, Safari 또는 Internet Explorer 11에서는 </strong> type="week"</p>

</body>
</html>

이상으로 HTML input 유형에 대해서 살펴보았다.

하나씩 꼭 실습하고 익히기를 추천합니다.

실력이 잘 늘지 않는 것 같지만, 어느 순간 당신은 마스터가 되어 있습니다.

모두 화이팅입니다!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML input 속성-2 (0)	2023.06.13
HTML input 속성-1 (0)	2023.06.12
HTML input 유형-3 (0)	2023.06.10
HTML input유형-2 (0)	2023.06.09
HTML input 유형-1 (0)	2023.06.08

enjoyCoding

HTML input 유형-4