▶HTML <input> 요소의 다양한 유형을 설명한다.
■ HTML Input Type
▶ 아래에 항목은 HTML에서 사용할 수 있는 다양한 input 유형이다.
▷ <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">
※ "type" 속성의 기본 값은 "text" 이다.
■ Input Type Text
▶ <input type="text">는 한 줄 텍스트 입력 필드를 정의한다.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_text
■ Input Type Password
▶ <input type="password">는 비밀번호 필드를 정의한다.
<form>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>실습 : https://www.w3schools.com/html/html_form_input_types.asp
※ 비밀번호 필드 안에 문자는 마스킹 기호로 표시된다.
■ Input Type Submit
▶ <input type="submit">은 폼 핸들러에 폼 데이터를 제출하기 위한 버튼을 정의한다.
▶ 폼 핸들러는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버 페이지이다.
▶ 폼 핸들러는 폼의 "action" 속성에 지정된다.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_submit
▶ submit 버튼의 속성 값을 생략하면 버튼은 기본 텍스트를 가진다.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_submit_nn
■ Input Type Reset
▶ <input type="reset">은 모든 폼 값을 기본값으로 재설정하는 재설정 버튼을 정의한다.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_reset
※ 입력 값을 변경한 후 "재설정" 버튼을 클릭하면 폼 데이터가 기본값으로 재설정된다.
■ Input Type Radie
▶ <input type="radio">는 라디오 버튼을 정의한다.
▶ 라디오 버튼을 사용하면 제한된 수의 선택 항목 중 하나만 선택할 수 있다.
<p>Choose your favorite Web language:</p>
<form>
<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>
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_radio
■ Input Type Checkbox
▶ <input type="checkbox">는 체크박스를 정의한다.
▶ 체크박스를 사용하면 제한된 수의 선택 항목 중 선택하지 않거나 한 개 이상을 선택할 수 있다.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_checkbox2
■ Input Type button
▶ <input type="button">은 버튼을 정의한다.
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
■ Input Type Color
▶ <input type="color">는 색상을 포함해야 하는 입력 필드에 사용된다.
▶ Browser 지원에 따라 색상 선택기가 입력 필드에 나타날 수 있다.
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_color
■ Input Type Date
▶ <input type="date">는 날짜를 포함해야 하는 입력 필드에 사용된다.
▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date
▶ "min" 및 "max" 속성을 사용하여 날짜에 제한을 추가할 수도 있다.
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date_max_min
■ Input Type Datetime-local
▶ <input type="datetime-local">은 시간대 없이 날짜 및 시간 입력 필드를 지정한다.
▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_datetime-local
■ Input Type Email
▶ <input type="email">은 이메일 주소를 포함해야 하는 입력 필드에 사용된다.
▶ Browser 지원에 따라 전자 메일 주소는 제출 시 자동으로 확인될 수 있다.
▶ 일부 스마트폰은 이 메일 유형을 인식하고 이메일 입력과 일치하도록 키보드에 ".com"을 추가한다.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email
■ Input Type Image
▶ <input type="image">는 이미지를 제출 버튼으로 정의한다.
▶ 이미지 경로는 "src" 속성에 지정된다.
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_image
■ Input Type File
▶ <input type="file">은 파일 선택 필드와 파일 업로드를 위한 "찾아보기"버튼을 정의한다.
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_file
■ Input Type Hidden
▶ <input type="hidden">은 숨겨진 입력 필드를 정의한다. ( 사용자에게 표시되지 않음 )
▶ hidden 필드를 사용하면 웹 개발자가 양식을 제출할 때 사용자가 보거나 수정할 수 없는 데이터를 포함할 수 있다.
▶ 숨겨진 필드는 종종 양식을 제출할 때 업데이트해야 하는 데이터베이스 레코드를 저장한다.
※ 참고 : 값은 페이지 콘텐츠에서 사용자에게 표시되지 않지만 모든 Browser의 개발자 도구 또는 "소스 보기" 기능을 사용하여 볼 수 있고 편집할 수 있다.
※ 보안의 한 형태로 숨겨진 입력을 사용하지 않는다.
<form>
<label for="fname">First name:</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>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_hidden
■ Input Type Month
▶ <input type="month">는 사용자가 월과 연도를 선택할 수 있도록 한다.
▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_month
■ Input Type Number
▶ <input type="number">는 숫자 입력 필드를 정의한다.
▶ 허용되는 번호에 대한 제한을 설정할 수도 있다.
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number
■ Input 제한
▶ 아래에 항목은 몇 가지 일반적인 입력 제한 목록이다.
▷ checked : 페이지가 로드될 때 입력 필드가 미리 선택되도록 지정한다. (type="checkbox" 또는 type="radio"의 경우 해당)
▷ disabled : 입력 필드를 비활성화하도록 지정한다.
▷ max : 입력 필드의 최대값을 지정한다.
▷ maxlength : 입력 필드의 최대 문자 수를 지정한다.
▷ min : 입력 필드의 최소값을 지정한다.
▷ pattern : 입력 값을 확인할 정규식을 지정한다.
▷ readonly : 입력 필드가 읽기 전용임을 지정한다. (값 변경 불가)
▷ required : 입력 필드가 필수임을 지정한다.
▷ size : 입력 필드의 너비(문자)를 지정한다.
▷ step : 입력 필드의 유효한 숫자 간격을 지정한다.
▷ value : 입력 필드의 기본값을 지정한다.
■ Input Type Range
▶ <input type="range">는 슬라이더 컨트롤과 같이 정확한 값이 중요하지 않은 숫자를 입력하기 위한 컨트롤을 정의한다.
▶ 기본 범위는 0 ~ 100이다.
▶ 최소, 최대 및 단계 속성에 허용되는 숫자에 대한 제한을 설정할 수 있다.
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range
■ Input Type Search
▶ <input type="search">는 검색 필드에 사용된다. (검색 필드는 일반 텍스트 필드처럼 동작)
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_search
■ Input Type Tel
▶ <input type="tel">은 전화번호를 포함해야 하는 입력 필드에 사용된다.
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_tel
■ Input Type Time
▶ <input type="time">을 사용하면 사용자가 시간(시간대없음)을 선택할 수 있다.
▶ Browser 지원에 따라 시간 선택기가 입력 필드에 나타날 수 있다.
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_time
■ Input Type Url
▶ <input type="url">은 URL 주소를 포함해야 하는 입력 필드에 사용된다.
▶ Browser 지원에 따라 URL 필드는 제출 시 자동으로 검증된 수 있다.
▶ 일부 스마트폰은 URL 유형을 인식하고 키보드에 ".com"을 추가하여 URL 입력과 일치시킨다.
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_url
■ Input Type Week
▶ <input type="week">는 사용자가 주와 연도를 선택할 수 있도록 한다.
▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_week
출처 : https://www.w3schools.com/html/html_form_input_types.asp
HTML Input Types
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com