HTML Input Type 속성

HTML 입력 유형

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">

 

인라인 요소	<input>	1. 사용자로부터 데이터 값을 입력받기 위한 태그입니다.
		2. type 속성 값에 따라 다양한 폼 컨트롤을 생성할 수 있습니다.
		3. 공통 속성으로 name, value 속성이 있습니다.

text	한 줄 글 입력 상자 maxlenhth 속성으로 최대 글자 수를 제한할 수 있다.
password	비밀번호 입력 상자 입력된 내용은 '*'로 표시된다.
search	검색 입력 상자
email	이메일 입력 상자
tel	전화번호 입력 상자
color	컬러 입력 상자
number	숫자 입력 상자 숫자의 최솟값, 최댓값을 min, max 속성으로 지정할 수 있다.
range	슬라이드 바 숫자의 최솟값, 최댓값을 min, max 속성으로 지정할 수 있다.
radio	라디오 버튼 여러 개 radio 중 하나만 선택 가능합니다. (요소의 name 속성 값이 같이야 합니다.) 이메일 수신 여부 예 <input type="radio" name="email"> 아니오 <input type="radio" name="email"> checked 속성을 정의하면 웹 페이지 실행 시 해당 radio가 기본으로 표시된다.
checkbox	체크박스 다중 선택이 가능하다 checked 속성을 정의하면 웹 페이지 실행 시 해당 checkbox가 기본으로 표시된다.
submit	전송 버튼 value 속성으로 버튼에 표시되는 텍스트를 지정한다.
reset	초기화 버튼 value 속성으로 버튼에 표시되는 텍스트를 지정합니다.
button	범용 버튼 value 속성으로 버튼에 표시되는 텍스트를 지정합니다.
image	이미지 버튼 alt 속성을 반드시 정의해야 합니다.
file	첨부파일
hidden	사용자에게 노출할 필요가 없는 데이터를 지정합니다. 화면에 표시되지 않습니다.

 

<form action="login.php" method="post">
<fildset>
<legend>로그인</legend>

<p>
    <label for="id">ID</label> : 
    <input type="text" id="id" value="id">
</p>
<p>
    <label for="pw">PW</label> : 
    <input type="password" name="" id="pw">
</p>
<p>검색 : <input type="search" name="" id=""></p>
<p>email : <input type="email" name="" id=""></p>
<p>tel : <input type="tel" name="" id=""></p>
<p>color : <input type="color" name="" id=""></p>
<p>number : <input type="number" name="" id="" min="5" max="10"></p>
<p>range : <input type="range" name="" id="" min="5" max="10"></p>
<p>radio : 
    <input type="radio" name="sex" id="male">
    <label for="male">남자</label>
    <input type="radio" name="sex" id="female">
    <label for="female">여자</label>
</p>
<p>
    checkbox : 
    <input type="checkbox" name="" id="agree">
    <label for="agree">위 내용에 동의합니다.</label>
</p>
<p>submit : <input type="submit" value="전송"></p>
<p>reset : <input type="reset" value="취소"></p>
<p>button : <input type="button" value="확인"></p>
<p>image : <input type="image" src="./images/banner.jpg" alt="신성검사&신서버"></p>
<p>
    <label for="file">file</label> : 
    <input type="file" name="" id="file">
</p>
<p>hidden : <input type="hidden" name=""></p>

<p>textarea : <textarea name="" id="" cols="30" rows="10"></textarea></p>

<p>select : 
<select name="" id="">
    <option value="옵션 하나">옵션 하나</option>
    <option value="옵션 둘" selected>옵션 둘</option>
    <option value="옵션 셋">옵션 셋</option>
</select>
</p>
<p>
    <label for="phone">휴대폰번호</label>
    <select name="" id="phone" title="휴대폰 번호 앞자리">
    <option value="010">010</option>
    <option value="011">011</option>
    <option value="016">016</option>
    </select>
    -
    <input type="number" name="" title="휴대폰 번호 중간 4자리 입력">
    -
    <input type="number" name="" title="휴대폰 번호 끝 4자리 입력">
</p>

</fildset>
</form>

 

로그인

ID :

PW :

검색 :

email :

tel :

color :

number :

range :

radio : 남자 여자

checkbox : 위 내용에 동의합니다.

submit :

reset :

button :

image :

file :

hidden :

textarea :

select : 옵션 하나 옵션 둘 옵션 셋

휴대폰번호 010 011 016 - -