01-2⠀입력 양식 태그

 

 

<입력양식 태그>

 

 

 

<form> ~ </form>

폼을 만드는 가장 기본적인 태그

*<form 속성="속성 값">폼 요소</form>

 

<form> 태그의 속성

 

<form action=".php">
form 내용을 처리할 서버 지정

<method="get">

보안이 중요하지 않은 데이터 전송 시

<method="post">

보안이 필요한 데이터 전송 시

<form name="이름">

폼의 이름을 지정

<form target="_self"> (기본값)

action 에서 지정한 서버 결과를 현재 창에서 오픈

<form target="_blank">

action 에서 지정한 서버 결과를 새 창에서 오픈

<form autocomplete="on/off">

자동 완성 기능 (기본값은 on)

<form novalidate>

데이터의 유효성을 검사하지 않도록 지정 (주로 테스트 시에 사용)

 

 

 

<fieldset>

<legend>그룹 이름</legend>

</fieldset>

하나의 폼 안에서 구역을 나눌 때 사용하는 그룹 태그

 

<label> ~ </label>

폼 요소에 텍스트를 붙일 때 사용 

*태그 안에 요소 넣기

<label>아이디<input type="text"></label>

*id 를 지정하여 for 에 연결시키기

<label for="name">이름</lable>^<input type="text" id="name">

 

<input> 닫x

사용자가 입력한 정보를 받을 때 사용하는 데이터 양식 태그

 

 

 

 

<input> 태그의 type 속성

 

<input type="text">

텍스트 입력이 가능한 필드 삽입

<input type="password">

비밀번호 입력 필드 삽입

*텍스트 필드와 비밀번호 필드에서 주로 사용하는 속성

<size="5">

필드 길이 지정 (화면에 5개 글자 크기에 맞춰 필드 생성 나머지 글자들은 안보임)

<maxlenght="10">

입력 가능한 최대 문자 수 지정

<value="">

텍스트 필드 부분에 보여주는 내용 지정 (비밀번호 필드에는 사용하지 않음)

 

<input type="search">

검색을 위한 필드 삽입

<input type="url">

웹 주소를 입력하는 필드 삽입

<input type="email">

이메일을 입력하는 필드 삽입

<input type="tel">

전화번호를 입력하는 필드 삽입

 

<input type="checkbox">

항목 선택 폼 요소 (주어진 항목 중 2개 이상 선택시 사용)

<input type="radilo" name="jina">

항목 선택 폼 요소 (주어진 항목 중 1개만 선택, 각 항목 name 값 똑같이 지정)

*체크박스와 라디오버튼에서 사용하는 속성

<input type="checkbox" value="s_3">

선택한 항목을 서버에 알릴 때 넘겨줄 값을 지정 (영문이거나 숫자, 필수속성)

<input type="radio" checked>

기본으로 선택해놓고 싶은 항목에 사용

 

<input type="number">

숫자 입력 필드 삽입 (스핀박스)

<input type="range">

숫자 입력 필드 삽입 (슬라이드 막대)

*숫자 입력 필드에 사용하는 속성

<input type="number" min/max="">

숫자 입력 최소/최대값 지정 (기본값은 각 0/100)

<input type="range" step="">

숫자 간격 지정 (기본값은 0)

<input type="range" value="">

필드에 표시할 초기값

 

<input type="date">

날짜 입력 필드 (yyyy-mm-dd)

<input type="month">

월 선택 필드 (yyyy-mm)

<input type="week">

주 선택 필드 (1월 첫째주 기준 몇번째주인지 표시)

<input type="time">

시간 입력 필드 (오전/오후-시-분)

<input type="datetime">

<input type="datetime-local">

날짜와 시간을 함께 입력하는 필드

*날짜와 시간 입력 필드에 사용하는 속성

<input type="date" min/max="yyyy-mm-dd">

최소 시작 날짜나 시간을 지정 / 최대 시작 날짜나 시간을 지정

<input type="month" value="yyyy-mm">

기본적으로 표시할 날짜나 시간을 지정

 

<input type="submit">

폼에 입력한 정보를 action 에서 지정한 서버로 전송하게 하는 버튼 삽입

<input type="reset">

폼에 입력된 정보를 재설정하는 버튼 삽입

*속성

<input type="submit" value="가입하기">

버튼에 표시할 내용 지정

 

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

<submit> 태그와 같은 기능을 하는 이미지 버튼

 

<input type="button">

기능 없이 버튼만 삽입 (주로 자바스크립트 실행 시 사용)

*<input type="button" value="버튼에 표시할 내용">

 

<input type="file">

사진이나 문서를 첨부할 수 있게 하는 필드 삽입

 

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

화면에는 보이지 않지만 폼과 함께 서버로 전송되는 요소 (관리자가 알아야 하는 정보)

 

 

 

<input> 태그와 사용되는 속성들

 

<autofocus>

페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시

 

<placeholder="힌트 문구">

텍스트 필드 입력란에 적당한 힌트 내용을 표시 (클릭시 내용 사라짐)

 

<readonly>

<readonly="readonly">

<readonly="true">

읽기 전용 텍스트 필드 삽입 (사용자 입력불가)

 

<required>

<required="required">

필수 입력 필드를 지정

 

 

 

이 외에 폼에서 사용하는 다양한 태그들

 

<textarea> ~ </textarea>

여러 줄을 입력하는 텍스트 필드 삽입

*<textarea cols="가로 너비를 문자 단위로 지정(40이면 한글로 20글자)" row="몇 줄 표시할건지"></textarea>

 

<select> ~ </select>

<option> ~ </option>

드롭다운 목록 삽입

*<select size="드롭다운 항목의 개수" multiple (둘 이상의 항목을 선택할 때 사용)></select>

*<option value="서버로 넘길 값" selected (기본적으로 선택되어 보여줄 항목 지정)>

 

<datalist> ~ </datalist>

<option> ~ </option>

데이터 목록 삽입

*<input type="text" list="데이터 목록 id">

<datalist id="데이터 목록 id">^<option value="서버값1">옵션1</option>^</datalist>

input list 태그에 id 를 지정하고 데이터 목록과 연결시킴

(크롬 브라우저에서 value 의 서버값은 화면에도 표시됨, 브라우저마다 다름)

 

<button> ~ </button>

기능 버튼과 기능이 없는 버튼을 선택해서 삽입

*<button type="submit / reset / button">버튼에 표시 될 내용</button>

폼을 서버로 전송 / 입력 내용 초기화 / 기능 없음

*앞 내용의 <input type="button"> 과는 다름

 

 

 

 

폼에 사용되는 태그들

 

 

form 태그의 속성

 

input 태그의 type 속성

 

 

input 태그와 함께 사용되는 속성 태그들