[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 입력양식 작성하기"

05 폼 삽입하기, input 태그

<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id="umail" required>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label for="pw2">비밀번호 확인</label>
<input type="password" id="pwd2" required>
</li>
<li>
<label for="path">가입 경로</label>
<select id="path">
<option value="blog">블로그</option>
<option value="search">검색</option>
<option value="sns">SNS</option>
<option value="etc">기타</option>
</select>
</li>
<li>
<label for="memo">메모</label>
<textarea cols="40" rows="4" placeholder="남길 말씀이 있다면 여기에"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div id="buttons">
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</div>
</form>

 

 

 

---

 

 

<form>
    <fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
      <ul>
        <li>
          <label><input type="checkbox" value="s_3">선물용 3kg</label>
          <input type="number" min="0" max="5">개 (최대 5개)
        </li>
        <li>
          <label><input type="checkbox" value="s_5">선물용 5kg</label>
          <input type="number" min="0" max="3" value="1">개 (최대 3개)
        </li>
      </ul>
      <ul>
        <li>
          <label><input type="checkbox" value="f_3">가정용 3kg</label>
          <input type="range" min="0" max="5">개 (최대 5개)
        </li>
        <li>
          <label><input type="checkbox" value="f_5">가정용 5kg</label>
          <input type="range" min="0" max="3" value="1">개 (최대 3개)
        </li>
      </ul>      
      <p><b>포장 선택</b></p>
      <ul>
        <li><label><input type="radio" name="gift" value="yes">선물 포장</label></li>
        <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
      </ul>    
    </fieldset>

 

 

---

 

 

<form>
    <h1>날짜 지정하기</h1>
    <input type="date">
    <input type="month">
    <input type="week">
    <hr>
    <h1>시간 지정하기</h1>
    <input type="time">
    <input type="datetime-local">
    <hr>
    <h1>범위 제한하기</h1>
    <input type="date" min="2020-02-01" max="2020-02-15">
    <input type="time">
  </form>

 

 

폼에서 사용하는 태그

<form> 폼의 시작 끝 만듦

<fieldset> 폼 요소를 그룹으로 묶음

<legend> 필드셋에 제목을 붙임

<input> 사용자가 내용 입력 필드 삽입

<select>, <option> 드롭다운 목록 삽입

<textarea> 텍스트를 여러 줄 입력할 수 있는 텍스트 영역 삽입

<datalist> 데이터 목록 삽입

---

 

<input> 태그의 유형 type

text 한 줄짜리 텍스트 입력 텍스트 상자

password 비밀번호 입력 필드

search 검색입력 필드

url URL 주소 입력 필드

email 이메일 주소 입력 필드

tel 전화번호 입력 필드

checkbox 주어진 여러 항목 2개 이상 선택할 수 있는 체크박스

radio 주어진 여러 항목 1개 이상 선택할 수 있는 라디오 버튼

number 숫자 조절 스핀박스

range 숫자 조절 슬라이드 막대

date 사용자 지역 기준 날짜 (연,월,일)

month 사용자 지역 기준 날짜 (연,월)

week 사용자 지역 기준 날짜 (연,주)

time 사용자 지역 기준 시간 (시,분,초,분할초)

datetime 국제 표준시 날짜 시간(연,월,일,시,분,초,분할초)

datetime-local 사용자 지역 기주 날짜 시간 (연,월,일,시,분,초,분할초)

submit 전송버튼

reset 리셋버튼

image sumit 버튼 대신 사용할 이미지

button 일반버튼

file 파일 첨부 버튼

hidden 사용자에게는 보이지 않지만 서버로 넘겨주는 값 필드

<input> 태그의 속성

autofocus 웹문서 열리면 입력 필드 안 마우스 포인터 표시

placeholder 텍스트 필드 힌트

readonly 입력 필드 읽기 전용 지정

required 필수 입력 필드 지정

max 숫자 입력 필드 최댓값

min 숫자 입력 필드 최솟값

step 숫자 입력 필드 증감할 간격

maxlength 텍스트 관련 필드 입력 최대길이

minlength 텍스트 관련 필드 입력 최소길이

size 텍스트 관련 필드 화면에 표시할 크기

list 연결 할 데이터 목록 지정

 

---

 

 

출처

 

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB