HTML 폼

 

폼 태그

폼 : 사용자가 웹사이트로 정보를 보낼 수 있는 모든 요소(DB기반)

ex)로그인 시의 아이디 비밀번호

 

<form>

<form [속성="속성값"]> 여러 폼 요소 </form>

~폼에서 사용하는 여러가지 태그~

<textarea> : 여러줄의 텍스트 입력(게시판 글 입력 양식)

<select> : 드롭다운 목록(출생연도나 메일주소 고를때 목록 촥 떨어지는 그거)

  size = 드롭다운항목의 개수 지정

  multiple = 둘이상의 항목 선택

<optgroup> : 드롭다운 목록

<option> : 드롭다운 목록

  value = 서버로 넘겨줄 값 지정  selected = 기본적으로 보여줄 항목 지정

<!-- 드롭 다운 목록 -->
    <label for="prod1">상품 선택</label>
    <select id="prod1">
      <option value="special_3" selected>선물용 3kg</option>
      <option value="special_5">선물용 5kg</option>
      <option value="family_3">가정용 3kg</option>
      <option value="family_5">가정용 5kg</option>
    </select>

 

<datalist>, <option> : 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨

<!-- 데이터 목록 -->
    <label for="prod2">포장 여부 </label>
    <input type="text" id="prod2" list="pack">
    <datalist id="pack">
      <option value="package">선물 포장</option>
      <option value="no_package">포장 안 함</option>
    </datalist>

 

<progress>, <meter> : 막대그래프

(low 보다 조금 작으면 노랑색, 많이 작으면 빨강)

<form>
        <h3>학습량 그래프</h3> 
        홍민성 : <meter min="0" max="100" optimum="50" value="60">60 out of 100</meter><br>
        송지효 : <meter low="0.3" high="0.5" value="0.22">22%</meter><br>
        이민정 : <meter low="0.25" high="0.75" optimum="0.8" value="0.2">20%</meter>
        <p></p>
        <h3>작업 진행율</h3> 
        초기 작업 : <progress value="22" max="100" title="진행율">22%</progress><br>
        중간 작업 : <progress value="0.77" max="1">77%</progress><br>
        다음 작업 : <progress value="0.98" max="1">98%</progress><br>
    </form>

 

 

 

폼 속성

method : 사용자가 입력한 내용을 서버로 넘겨주는 방법을 지정

=> get, post

get : URL 뒤에 파라미터를 붙여서 데이터를 (문자열 형태로) 전달. &로 구분

 

post : HTTP Request 헤더에 파라미터를 붙여서 데이터를 전송하는 방식. 글자수 제한X

name : 폼이름 지정

action : 내용을 처리해줄 서버 프로그램 지정

target : action에서 지정한 스크립트 파일을 다른 위치에서 열도록 해줌

<fieldset> : 그룹으로 묶음(집합처럼 네모상자에)

<legend> : <fieldset>태그 안에 넣으면 그룹의 제목으로 붙음

<label> : <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용(아이디 적는부분 같은거)

<label>아이디(6자 이상)<input type="text"></label>
//또는
<label for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id">
//이런식으로 적어줌

 

input 태그

<input>태그는 사용자의 입력을 받기위한 태그이다.

다양한 type을 통해 특성을 지정해 줄 수 있지만, 디폴트값은 text

 

 

input 의 type속성

text : 한 줄짜리 텍스트를 입력하는 텍스트 박스

password : 비밀번호를 입력하는 필드(‘ * ’나 ‘•’로 표시)

<form>
   <fieldset>
      <input type="hidden" name="url" id="url" value="사이트를 통한 직접 로그인">
      <label>아이디: <input type="text" id="user_id" size="10"></label>
      <label>비밀번호: <input type="datetime-local" id="user_pw" size="10"></label>
      <input type="submit" value="로그인">
   </fieldset>
<form>
//+maxlength : 입력 가능한 최대 문자 수 지정

search : 검색 필드(검색창에 x가 표시되어 검색어 삭제 쉬움)

url : url입력 필드

email : 이메일 주소 입력 필드(메일 형식 자동 체크)

tel : 전화번호 입력(기능이 있는건 아님)

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

radio : 1개만 선택할 수 있는 라디오버튼

 <fieldset>
      <ul>
        <li><label><input type="radio" name="gift" value="yes" checked>선물 포장</label></li>
        <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
      </ul>    
</fieldset>
//checked를 적어주면 기본으로 체크됨.

number : 스핀 박스(숫자를 고를 수 있는 필드↕)

range : 슬라이드 막대(숫자를 재생바처럼 조절해서 고를 수 있음)

<li>
  <label><input type="checkbox" value="s_3">선물용 3kg</label>
  <input type="number" min="0" max="5">개 (최대 5개)
</li>
//step : 숫자 간격 지정(default=1)
//value : 필드에 표시할 초깃값

date : 날짜(연, 월, 일) 골라서 입력할 수 있는 필드

month : 날짜(연, 월)

week : 날짜(연 ,주)

time : 시간(시, 분, 초, 분할 초)

datetime : 국제 표준시(연, 월, 일, 시, 분, 초, 분할 초) 입력 받는 텍스트 필드

datetime-local : 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 골라서 입력

submit : 전송 버튼

reset : 리셋 버튼

<input type="submit|reset" value="버튼에 표시할 내용">

image : submit에서 버튼대신 사용할 이미지 넣을 수 있음

<input type="image" src="이미지 경로" alt="대체 텍스트">

button : 일반 버튼

file : 파일 첨부 버튼

hidden : 사용자에게 보이지 않는 필드. 서버로 함께 전송되는 요소

<input type="hidden" name="이름" value="서버로 넘길 값">

color : 색상칩에서 원하는 색상을 선택하게 함

 

input의 다양한 속성

<input type="tel" id="phone" placeholder="01012345678 형식으로 입력하세요">

autofocus : 페이지 불러오자마자 원하는 폼요소에 마우스 커서 표시

placeholder : 입력란에 쓰여지는 텍스트. 클릭하면 사라짐

readonly : 입력란을 보기만하고 입력은 안되게 함

required : 필수로 적도록 함

disabled : 텍스트상자 비활성화

autocomplete : 사용했던 데이터 기준 자동완성 기능 제공

spellcheck : 입력되는 문장의 오타 점검

pattern : 입력 형태를 정규식으로 지정