HTML input유형-2

이 장에서는 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 유형 : checkbox

<input type="checkbox">은 확인란을 정의합니다.

확인란을 사용하면 제한된 수의 0 또는 더 많은 옵션을 선택할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<h2>체크박스</h2>
<p><strong>input type="message" </strong>은 확인란을 정의합니다:</p>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> 나는 자전거를 가지고 있다</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> 나는 자동차를 가지고 있다</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> 나는 보트를 가지고 있다</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input type=checkbox 입력 유형 체크박스 활용 예제

HTML input 유형 : button

<input type="button">은 버튼을 정의한다:

<!DOCTYPE html>
<html>
<body>

<h2>Input 버튼</h2>

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

</body>
</html>

HTML input 유형 : color

<input type="color">는 색상을 포함해야 하는 입력 필드에 사용된다.

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

<!DOCTYPE html>
<html>
<body>

<h2>색상을 선택하시요</h2>

<p><strong>입력 유형="color"<strong>은 색상을 포함해야 하는 입력 필드에 사용됩니다.</p>

<form action="/action_page.php">
  <label for="favcolor">좋아하는 색상은:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <input type="submit" value="Submit">
</form>

<p><b>참고: Internet Explorer 11 또는 Safari 9.1(또는 이전 버전)에서는 type="color"가 지원되지 않습니다.</p>

</body>
</html>

HTML input : date

<input type="date">는 날짜를 포함해야 하는 입력 필드에 사용된다.

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

<!DOCTYPE html>
<html>
<body>

<h2>날짜 필드</h2>

<p><strong>입력 유형="date"</strong>은 날짜를 포함해야 하는 입력 필드에 사용됩니다.</p>

<form action="/action_page.php">
  <label for="birthday">생일:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>

<p><strong>참고: Internet Explorer 11 또는 Safari 14.1 이전 버전에서는 type="date"가 지원되지 않습니다.</p>

</body>
</html>

HTML input 유형 : Datetime-local

<input type="datetime-local">은 시간대가 없는 날짜 및 시간 입력 필드를 지정한다.

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

<!DOCTYPE html>
<html>
<body>

<h2>지역 날짜 필드</h2>

<p><strong>입력 유형="datetime-local"</strong>은 시간대가 없는 날짜 및 시간 입력 필드를 지정합니다.</p>

<form action="/action_page.php">
  <label for="birthdaytime">생일(날짜, 시간):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>

<p><strong>참고: </strong> type="datetime-local"은 Internet Explorer 11 또는 이전 Safari 14.1에서 지원되지 않습니다.</p>

</body>
</html>

HTML input type=datetime-local 입력 유형 지역날짜 활용 예제

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

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

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

모두 화이팅입니다!!!

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

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

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

HTML input 유형-4 (0)	2023.06.11
HTML input 유형-3 (0)	2023.06.10
HTML input 유형-1 (0)	2023.06.08
HTML form 요소 (0)	2023.06.07
HTML #Form 속성 (0)	2023.06.06

enjoyCoding

HTML input유형-2