HTML input 유형-3

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

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

브라우저 지원에 따라 제출 시 전자 메일 주소를 자동으로 확인할 수 있다.

일부 스마트폰은 전자 메일 유형을 인식하고 전자 메일 입력과 일치하도록 키보드에 ".com"을 추가한다.

<!DOCTYPE html>
<html>
<body>

<h2>이메일 필드</h2>

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

<form action="/action_page.php">
  <label for="email">이메일을 입력하세요:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input 유형 : image

<input type="image">는 이미지를 제출 버튼으로 정의한다.

이미지 경로는 src 속성에 지정된다.

<!DOCTYPE html>
<html>
<body>

<h2>이미지를 제출 버튼으로 표시</h2>

<form action="/action_page.php">
  <label for="fname">이름: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">성: </label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>참고: </b> 입력 유형="이미지"는 이미지 버튼을 활성화한 클릭의 X 및 Y 좌표를 전송합니다.</p>

</body>
</html>

HTML input 유형 : file

<input type="file">은 파일 업로드를 위한 파일 선택 필드와 "Browse" 버튼을 정의한다.

<!DOCTYPE html>
<html>
<body>

<h1>파일 업로드</h1>

<p>업로드할 파일을 선택할 수 있는 파일 선택 필드 표시:</p>
<form action="/action_page.php">
  <label for="myfile">파일을 선택하세요:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input 유형 : hidden

<input type="hidden">은 숨겨진 입력 필드를 정의한다(사용자가 볼 수 없음).

숨겨진 필드를 사용하면 양식을 제출할 때 사용자가 보거나 수정할 수 없는 데이터를 웹 개발자가 포함할 수 있다.

숨겨진 필드는 종종 양식을 제출할 때 업데이트해야 하는 데이터베이스 레코드를 저장한다.

참고: 페이지 내용에서 값이 사용자에게 표시되지는 않지만 브라우저의 개발자 도구 또는 "소스 보기" 기능을 사용하여 값을 볼 수 있으며 편집할 수도 있다. 숨겨진 입력을 보안의 한 형태로 사용하지 마십시오!

<!DOCTYPE html>
<html>
<body>

<h1>숨겨진 필드(소스 코드 검색)</h1>

<form action="/action_page.php">
  <label for="fname">이름:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

<p><strong>참고:</strong> 숨김 필드는 사용자에게 표시되지 않지만 양식 제출 시 데이터가 전송됩니다.</p>

</body>
</html>

HTML input 유형 : month

<input type="month">를 사용하면 월과 연도를 선택할 수 있다.

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

<!DOCTYPE html>
<html>
<body>

<h2>월 필드(Month Field)</h2>

<p><strong>입력 유형="month"<strong>로 월과 연도를 선택할 수 있습니다.</p>

<form action="/action_page.php">
  <label for="bdaymonth">생일(년 월):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>

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

</body>
</html>

HTML input 유형 : number

<input type="number">는 숫자 입력 필드를 정의한다.

허용되는 숫자에 대한 제한을 설정할 수도 있다.

다음 예제에서는 1에서 5 사이의 값을 입력할 수 있는 숫자 입력 필드를 표시한다:

<!DOCTYPE html>
<html>
<body>

<h2>숫자 필드(Number Field)</h2>

<p><strong>입력 유형="number"</strong>은 숫자 입력 필드를 정의합니다.</p>

<p>최소 및 최대 속성을 사용하여 입력 필드에 숫자 제한을 추가할 수 있습니다:</p>

<form action="/action_page.php">
  <label for="quantity">양 (1 ~ 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit" value="Submit">
</form>

</body>
</html>

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

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

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

모두 화이팅입니다!!!

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

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

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

HTML input 속성-1 (0)	2023.06.12
HTML input 유형-4 (0)	2023.06.11
HTML input유형-2 (0)	2023.06.09
HTML input 유형-1 (0)	2023.06.08
HTML form 요소 (0)	2023.06.07

enjoyCoding

HTML input 유형-3