HTML input 유형-1

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

<input type="text">는 한 줄 텍스트 입력 필드를 정의한다:

<!DOCTYPE html>
<html>
<body>

<h2>Text field</h2>
<p><strong>input type="text"<strong>은 한 줄 텍스트 입력 필드를 정의합니다:</p>

<form action="/action_page.php">
  <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"><br><br>
  <input type="submit" value="Submit">
</form>

<p>양식 자체가 보이지 않습니다.</p>
<p>또한 텍스트 필드의 기본 너비는 20자입니다.</p>

</body>
</html>

HTML input type 입력유형 요소 input type="text" 예제

HTML input 유형 : password

<input type="password">는 암호 필드를 정의한다:

<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>

<p><strong>입력 유형="password"<strong>은 암호 필드를 정의합니다:</p>

<form action="/action_page.php">
  <label for="username">사용자이름:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">암호:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="Submit">
</form>

<p>암호 필드의 문자는 마스킹됩니다(별표 또는 원으로 표시됨).</p>

</body>
</html>

HTML input type 입력유형 요소 input type="password" 예제

HTML input 유형 : submit

<input type="submit">은 form data 를 form-handler 에 제출하기 위한 버튼을 정의한다.

form-handler는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버 페이지이다.

양식 처리기는 양식의 action 특성에 지정된다:

<!DOCTYPE html>
<html>
<body>

<h2>제출 버튼(Submit Button)</h2>

<p><strong>input type="message"<strong>은 폼 데이터를 폼 팩터에 제출하기 위한 버튼을 정의합니다:</p>

<form action="/action_page.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" value="Submit">
</form>

<p>"제출"을 클릭하면 양식 데이터가 "/action_page.php"라는 페이지로 전송됩니다.</p>

</body>
</html>

HTML input type 입력유형 요소 input type="submit" 예제

제출 단추의 값 속성을 생략하면 단추에 기본 텍스트가 표시된다:

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.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">
</form>

</body>
</html>

HTML input 유형 : reset

<input type="reset">는 모든 양식 값을 기본값으로 재설정하는 리셋 버튼을 정의한다:

<!DOCTYPE html>
<html>
<body>

<h2>리셋 버튼</h2>

<p><strong>input type="filen"/strong"은 모든 폼 값을 기본값으로 재설정하는 재설정 버튼을 정의합니다:</p>

<form action="/action_page.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" value="Submit">
  <input type="reset">
</form>

<p>입력 값을 변경한 후 "재설정" 단추를 누르면 양식 데이터가 기본값으로 재설정됩니다.</p>

</body>
</html>

HTML input type 입력유형 요소 input type="reset" 예제

HTML input 유형 : radio

<input type="radio">는 라디오 버튼을 정의한다.

라디오 버튼을 사용하면 제한된 수의 선택 중 하나만 선택할 수 있다:

<!DOCTYPE html>
<html>
<body>

<h2>라디오 버튼</h2>

<p><strong>입력 유형="radio"<strong>은 라디오 버튼을 정의합니다:</p>

<p>좋아하는 웹 언어 선택:</p>
<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML input type 입력유형 요소 input type="radio" 예제

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

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

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

모두 화이팅입니다!!!

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

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

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

HTML input 유형-3 (0)	2023.06.10
HTML input유형-2 (0)	2023.06.09
HTML form 요소 (0)	2023.06.07
HTML #Form 속성 (0)	2023.06.06
HTML Forms (0)	2023.06.05

enjoyCoding

HTML input 유형-1