[Html] 입력 양식 요소 - Input의 타입 유형

Input 요소의 타입

텍스트 입력(text)

• 사용자로부터 한 줄의 텍스트를 입력받을 수 있는데, form 요소 그 자체는 웹 페이지에 나타나지 않는다.

<form action="/examples/media/request.php">
    검색할 내용을 입력하세요 :
    <input type="text" name="search">
</form>

비밀번호 입력(password)

• 사용자로부터 비밀번호를 입력받는데 화면에 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다.

<form>
    사용자 : <br><input type="text" name="username"><br>
    비밀번호 : <br><input type="password" name="password" required>
</form>

네모 버튼 선택(Button)

<form>
    <input type="button" value="버튼입니다">
</form>

라디오 버튼(radio)

• 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있다.
• 정확한 입력값 전송을 위해서 똑같은 name 속성을 가지고 있어야 한다.
• checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

<form>
    <input type="radio" name="lecture" value="html" checked> HTML <br>
    <input type="radio" name="lecture" value="css"> CSS <br>
    <input type="radio" name="lecture" value="java"> JAVA <br>
    <input type="radio" name="lecture" value="cpp"> C++
</form>

체크박스(checkbox)

• 여러 개의 옵션 중에서 다수의 옵션을 한번에 입력받을 수 있다.
• 정확한 입력을 전송하기 위해서 똑같은 name 속성을 가지고 있어야 한다.
• checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있고, disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있다.

<form>
    <input type="checkbox" name="lecture" value="html" checked> HTML <br>
    <input type="checkbox" name="lecture" value="css"> CSS <br>
    <input type="checkbox" name="lecture" value="java"> JAVA <br>
    <input type="checkbox" name="lecture" value="cpp" disabled> C++
</form>

날짜 입력(date)

• 브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여주며, min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있다.

<input type="date" name="theday" min="1977-01-01" max="2020-12-31">

연도와 월 입력(month)

• 사용자가 연도와 월을 입력할 수 있도록 해준다.

<input type="month" name="birthmonth">

연도와 주 입력(week)

• 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.

<input type="week" name="nthweek">

시간 입력(time)

• 사용자가 시간을 입력할 수 있도록 해준다.

<input type="time" name="birthtime">

날짜와 시간 입력(datetime-local)

• 사용자가 날짜와 시간을 입력할 수 있도록 해준다.

<input type="datetime-local" name="starttime">

색상 입력(color)

• 브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여주고, 선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다.

<input type="color" name="favcolor" value="#CC6600">

숫자 입력(number)

• number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기며, 브라우저 지원 여부에 따라 min와 max를 사용해 숫자 선택에 제한값을 설정할 수도 있다.

<input type="number" name="favnum" min="1" max="9">

입력 범위 지정(range)

• 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다.
• 브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여준다.

0 <input type="range" name="favnum" min="1" max="9"> 9

이메일 입력(email)

• 사용자가 email 주소를 입력할 수 있도록 해주며, 입력한 email 주소가 유효한 email 주소인지 자동으로 검사한다.

<input type="email" name="email">

URL 주소 입력(url)

• 사용자가 URL 주소를 입력할 수 있도록 해주며, 입력한 URL 주소가 유효한 주소인지 자동으로 검사한다.

<input type="url" name="url">

전화번호 입력(tel)

• 전화번호를 입력할 수 있도록 해준다.

<input type="tel" name="tel">

파일 입력(file)

• 사용자로부터 파일을 전송받을 수 있다.
• accept 속성을 이용하면 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있다.

<input type="file" id="myfile" name="myfile">

전송(submit)과 초기화(reset)

• 입력받은 데이터를 서버의 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지인 폼 핸들러(form-handler)로 제출하는 버튼을 만들 수 있다.
• 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.

<form>
  <label for="name">이름:</label><br>
  <input type="text" id="name" name="name" value="Suan"><br>
  <label for="affiliation">소속:</label><br>
  <input type="text" id="affiliation" name="affiliation" value="SuanLab"><br><br>
  <input type="submit" value="전송">
  <input type="reset" value="초기화">
</form>

검색어 입력(search)

• 텍스트 필드와 동일하게 동작하는데, search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시가 생기는 점이다.

<input type="search" name="keyword">

숨겨진 입력(hidden)

• 감추어진 입력 form이 생성된다.

<input type="hidden" name="country" value="Norway">
hidden filed는 사용자에 표시되지 않는다.

이미지 입력(image)

• 이미지로 된 submit 버튼을 생성한다.

<input type="image" src="img/img_submit.gif" alt="Submit" width="48" height="48">

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/