HTML5 form 관련 태그 정리

Do it! HTML5 + CSS3 웹표준의 정석을 공부하고 요약 정리하는 글

form 태그의 속성

method=”get/post” : 사용자가 입력한 값을 서버로 어떻게 넘겨줄지 지정

name=” ” : 폼의 이름을 지정

action=” ” : 사용자 입력값을 처리해 줄 프로그램 지정(ex.login.php)

autocomplete=”off” : 자동완성 기능이 기본적으로 on되어있음

form요소에 label 붙이기

1.for=”id”를 이용해 label과 form 요소 연결하기

<label for=”user_id”>아이디</label> <input type=”text” id=”user_id”>

2.radio button과 check box에서 label 사용하기(선택범위가 넓어짐)

<label><input type=”radio” name=”subject” value=”1″>영어<label>

<label><input type=”radio” name=”subject” value=”0″>수학<label>

form요소 그룹 묶기<fieldset>, <legend>

<form>

<fieldset>

<legend> 그룹 제목 </legend>

</fieldset>

</form>

사용자 입력을 위한 <input>태그

(type 종류 : hidden, text, search, tel, url, email, password, datetime, datetime-local, date, month, week, time, number, range, color, checkbox, radio, file, submit, image, reset, button)

type=”number” : 숫자 입력하기

<label for=”order”>주문개수</label>

<input type=”number” id=”order” min=”1″ max=”5″ value=”1″>

type=”range” : 범위 지정하기

<label for=”level”>선택 단계</label>

<input type=”range” id=”level” min=”1″ max=”3″ value=”1″>

type=”submit / reset” : 서버 전송, 리셋 버튼 넣기

<input type=”submit/reset” value=”전송/다시입력”>

type=”image” : submit 버튼 대신 이미지 전송 버튼 넣기

<input type=”image” id=”button” src=”images/login.jpg” alt=”login”>

type=”button” : 버튼넣기(onclick으로 함수 실행)

<input type=”button” value=”새 탭 열기” onclick=”window.open()”>

type=”file” : 파일 첨부하기

<label>파일첨부<input type=file”><label>

<input> 태그의 다양한 속성

autofocus : 페이지를 불러오면 원하는 요소에 마우스 커서 표시 가능

placeholder=”hint” : 입력할 값 힌트 표시

readonly : 읽기 전용 필드

required : 필수 필드

size/minlength/maxlength=”n” : 길이, 최소 입력값, 최대 입력값 속성

드롭다운 목록 만들기 <select><option>

<label for=”class”>학과</label>

<select size=”5″ id=”class” multiple> //여러옵션 선택

<option value=”archi”>건축공학과</option>

<option value=”jounar”>신문방송학과</option>

</select>

 

————————————————–

사이트 리뉴얼중입니다~

서버(Linux, ESXi), NAS(헤놀로지, ESXi 및 IT관련 정보, 기타 등등을 공유하는 커뮤니티 SVRFORUM을 새로 만들었습니다.
많은 가입(?) 부탁드립니다~
https://svrforum.com

이전글들은 모두 상단 메뉴의 Blog 글 모음에있습니다!

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

홈서버 IT 커뮤니티 SVRFORUM
Link