Publishing/HTML

HTML Input Type 속성

oodada 2020. 2. 11. 11:30

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>

 

로그인

:

:

검색 :

email :

tel :

color :

number :

range :

radio :

checkbox :

submit :

reset :

button :

image :

:

hidden :

textarea :

select :

- -

 

 

 

 

 

 

 

 

 

 

 

 

'Publishing > HTML' 카테고리의 다른 글

HTML input 속성  (0) 2020.02.12
HTML Form 요소  (0) 2020.02.12
HTML 폼  (0) 2020.02.11
HTML 테이블  (0) 2020.02.10
HTML 목록  (0) 2020.02.10
티스토리 친구하기