[html] html5에서 자주 쓰는 폼(form) 요소

 

 

 

 

 

 

 

 

 

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다.

‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다.

HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다.

자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.

[네이버 지식백과]

 

---

 

 

 

 

 

input type="time"

 

---

<input type="time"> 사용자의 지역을 기준으로 시간(시분초)을 지정

 

 

 

 

 

 

 

 

 

 

 

input type="date"

 

---

 

<input type="date">사용자의 지역을 기준으로 날짜(연월일)를 지정

 

 

 

 

 

 

 

 

<input type="datetime-local">

 

---

 

nput type="datetime-local" 사용자의 지역을 기준으로 날짜와 시간

(연월일시 분초)을 지정

<input type="datetime-local">

 

 

 

 

 

 

 

 

 

<input type="week">

 

---

 

 

input type="week" 사용자의 지역을 기준으로 날짜(연주)를 지정

 

 

 

 

 

 

 

 

 

 

 

<input type="month">

 

---

 

input type="month" 사용자의 지역을 기준으로 날짜(연월)을 지정

 

 

 

 

 

 

 

 

 

<input type="tel">

 

---

 

input type="tel" 전화번호를 입력하는 폼요소

(가상 키패드 변화 가능, 전화연결)

 

 

 

 

 

 

 

<input type="email">

 

input type="email" email 주소 입력하는 폼 요소

(브라우저에서 email형식을 체크, 가상 키패드 변화 가능)

 

 

 

 

 

 

 

 

 

<input type="url">

 

---

 

input type="url" 사이트 주소 입력하는 폼 요소

(브라우저에서 url형식을 체크, 가상 키패드 변화 가능)

 

 

 

 

 

 

 

 

 

 

input type="number"

 

---

 

<input type="number"> 숫자 값을 지정하는 폼 요소(증감 버튼)

 

 

min="n" 속성으로 최솟값 지정 가능.

<input type="number" min="0">

max="n" 속성으로 최댓값 지정 가능.

<input type="number" max="100">

step="n" 속성으로 증감 간격 지정 가능.

<input type="number" step="5">

 

 

 

 

 

 

 

 

 

 

 

 

<input type="range">

 

---

 

input type="range" 범위 내의 값을 선택하는 폼 요소

 

 

 

 

 

 

 

<input type="color">

 

---

 

input type="color" 색상을 선택하는 폼 요소

 

 

 

 

 

 

 

 

<input type="search">

 

---

 

input type="search" 검색용 입력창(삭제 버튼)

 

 

 

 

 

 

 

 

 

placeholder - 입력 예시를 보여줌

 

---

 

<input type="tel" placeholder="010-5555-7777">

<input type="text" placeholder="영문 숫자 조합으로 6~12자">

 

 

 

 

 

 

 

 

 

 

 

 

required - 필수 입력 요소로 지정

 

---

 

 

<label> ID <input type="text" required> </label>

<label> Password <input type="password" required> </label>

 

 

 

 

 

 

 

 

 

 

 

autofocus - 자동 포커싱 된 입력 요소로 지정

---

 

 

<label> Name <input type="text" autofocus> </label>

 

 

 

 

 

 

 

 

 

 

readonly - 수정 불가한 (읽기만 가능한) 입력 요소로 지정

---

 

 

 

<label> Group <input type="text" readonly value="A team"> </label>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

disabled - 사용 불가한 입력 요소로 지정

 

---

 

 

<label> Group <input type="text" disabled value="B team"> </label>

 

 

 

 

 

 

 

 

폼 요소 들을 그룹화 하여 표현하기 - fieldset, legend

 

---

 

 

 

 

 

 

 

<예시 1>

<fieldset>

<legend> Log-In </legend>

 

<label> ID <input type="text" required> </label> <br>

<label> Password <input type="password" required> </label> <br>

<input type="image" src="img_submit.gif">

</fieldset>

 

 

 

 

 

<예시 2>

<fieldset>

<legend> 특별 재난지원금 방문신청 </legend>

<label> 방문하실 날짜는

<input type="date"> </label> <br>

<label> 시간대는

<input type="time"> ~ <input type="time"> </label>입니다.

</fieldset>

 

 

 

 

 

 

 

 

---

 

 

 

ㅣ읽느라 수고 많으셨어요~ㅣ

 

 

---

 

 

 

 

 

 

 

 

---

 

 

 

 

 

부족한 글을 읽어주셔서 감사드립니다

아직 부족한 게 많으니

틀린 곳이 있다면

조언의 말씀 꼭 부탁드립니다!!!!