:: coding/HTML5 & CSS3
[HTML] 입력 양식 폼 (Form) 만들기
공하루
2022. 8. 5. 14:47
반응형
폼 (form)
사용자의 정보를 입력받을 수 있는 입력 양식
데이터를 입력받고 서버로 전송하는 역할. 페이지당 폼 하나만 사용
동작 방식
폼의 정보 입력 ▶ 서버 ▶ 결과
기본 문법 예시
<form action=” 처리할 페이지 주소 ” method=” 처리 방식 ”></form>
폼 관련 속성
| 속성 | 정의 | 속성값 | 정의 |
| action | 처리할 페이지 주소 서버프로그램 파일명. (.jpg, .php, .asp) |
||
| method | 처리 방식 서버에 데이터를 넘기는 방식 |
get | 주소줄과 함께 전송 (보안 취약) 크기가 작고 중요도가 낮은 데이터 처리시 사용 |
| post | 웹문서와 함께 전송 (보안 양호) 활용성이 좋음 |
폼 관련 태그
기본 폼
<form action="#" method="post">
<fieldset>
<legend>로그인정보</legend>
<ul>
<li>
<label for="a_id">아이디 : </label>
<input type="text" id="a_id" size="12">
</li>
<li>
<label for="a_pw">비밀번호 : </label>
<input type="password" id="a_pw" maxlength="10">
</li>
<li>
<label for="a_pw2">비밀번호 확인 : </label>
<input type="password" id="a_pw2" maxlength="10">
</li>
<li>
<label>
<input type="file">
</label>
</li>
<li>
<label for="a_memo">메모</label>
<textarea id="a_memo" cols="30" rows="10"></textarea>
</li>
</ul>
<div class="btn_list">
<input class="btn" type="submit" value="전송">
<input class="btn" type="reset" value="취소">
</div>
</fieldset>
</form>
1. fieldset
폼 안에서 감싸고 있는 박스
TIP!
form 안에서만 사용
2. legend
폼 제목, 박스 명
TIP!
웹 접근성
실제 서비스 시 가려서 사용하는 경우가 많음
3. lable
입력란 명
어떤 내용을 입력해야 하는 지 작성
<lable *for=“id이름”>레이블</lable>
<input type=“기능” id=“id이름” 속성=“속성값”>
* for
유효한 내용을 영문으로 작성. (id 웹접근성)
id명과 동일하게 잓어하여 연결
lable을 선택 시 input로 포커스 이동
4. textarea
text입력란 메모장
cols 가로, rows 세로
5. input
정보 입력란
기본 문법 예시
<input type=“기능” 속성="속성값">
type
양식의 유형
| 분류 | 유형 | 받는 데이터 / 기능 | 기타 |
| 정보 입력 | text | 문자 | |
| password | 비밀번호 | 사이트가 안전하지 않으면 사용자에게 경고 | |
| tel | 전화번호 | ||
| 이메일 | |||
| search | 검색 | ||
| url | 사이트 주소 | ||
| number | 수량 | step="10" min="0" max="100" | |
| range | 숫자를 슬라이드로 입력 | ||
| date | 날짜 (년, 월, 일) | ||
| file | 파일 업로드 | ||
| color | 컬러 선택 | ||
| 버튼 | reset | 취소 | 뒤에 value 작성 |
| submit | 전송 | ||
| button | 버튼 | ||
| 선택 | radio | 단일 선택 | |
| checkbox | 복수 선택 | ||
| 개발자용 | hidden | 개발자 사용 타입 | 개발자만 확인 가능 |
속성
| 속성 | 기능 | 기타 |
| id | for 웹접근성 | for의 내용과 동일한 내용 작성 id속성은 input 외에도 사용됨 |
| required | 필드 유효성 검사 | |
| autocomplete | 자동 완성 기능 | on (기본값) off로 하면 기능이 꺼짐 |
| placeholder | 입력 양식 입력 전 폼에 떠있는 글 |
|
| autofocus | 자동으로 커서 입력 | |
| maxlength | 최대 글자 수 | |
| minlength | 최소 글자 수 | |
| max | 최대 범위 | 숫자 관련 유형 |
| min | 최소 범위 | |
| step | 증감 값 | |
| disabled | 비활성화 | js를 활용하여 특정 조건을 충족 시 활성화 되게 할 수 있음 |
| readonly | 읽기 모드 | 편집 불가 |
| checked | 선택 폼 클릭 상태 | |
| multiple | 복수 선택 가능 | email, file |
| accept | 파일 유형 지정 파일 종류/*.확장자 |
filfe |
| name | 양식 컨트롤의 이름 | 양식과 함께 전송 |
| value | 양식 컨트롤의 값 |
선택 폼
1. radio
단일 선택 폼
기본 문법 예시
<input type=”radio” name=”항목” id=”컴퓨터 인식”>사용자 인식
<fieldset>
<legend>라디오버튼</legend>
<p>
수강 강의 선택하기 (1과목만 선택)
</p>
<label>
<input type="radio" name="subject" id="html">HTML
</label>
<label>
<input type="radio" name="subject" id="css">CSS
</label>
<label>
<input type="radio" name="subject" id="jquery">jquery
</label>
</fieldset>
2. checkbox
복수 선택 폼
기본 문법 예시
<input type=”checkbox” name=”항목” value=”컴퓨터 인식”>사용자 인식
<fieldset>
<legend>체크박스</legend>
<p>
희망 수강 사전 조사 (복수 선택 가능)
</p>
<label>
<input type="checkbox" name="mailing1" value="html">HTML
</label>
<label>
<input type="checkbox" name="mailing2" value="css">CSS
</label>
<label>
<input type="checkbox" name="mailing3" value="jquery">JQUERY
</label>
</fieldset>
radio와 checkbox
| 차이점 | radio | checkbox |
| 선택 | 단일 선택 | 복수 선택 |
| name | 선택지의 name 동일 | 선택지의 name 전부 다름 |
3. select
데이터 나열 선택 폼
기본 문법 예시
<select>
<option value="전달할 데이터">사용자가 보는 데이터</option>
<option value="전달할 데이터">사용자가 보는 데이터</option>
</select>
<fieldset>
<legend>select 태그</legend>
<p>
<label for="c_pu">웹퍼블리싱</label>
</p>
<p>
여러항목을 선택하고 싶으면, SHIFT 클릭
</p>
<select id="c_pu" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">javascript</option>
<option value="jq">jquery</option>
<option value="rwd">responsive web</option>
</select>
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">javascript</option>
<option value="jq">jquery</option>
<option value="rwd">responsive web</option>
</select>
</fieldset>
속성
| 속성 | 기능 | 기타 |
| multiple | 복수 선택 | shift 사용 |
4. optgroup
그룹 데이터 나열
기본 문법 예시
<select>
<optgroup label="그룹명">
<option value="전달할 데이터">그룹 항목</option>
<option value="전달할 데이터">그룹 항목</option>
</optgroup>
<optgroup label="그룹명">
<option value="전달할 데이터">그룹 항목</option>
<option value="전달할 데이터">그룹 항목</option>
</optgroup>
</select>
<fieldset>
<legend>optgroup 태그</legend>
<p>
<label for="webdesign">웹퍼블리싱 디자인</label>
<select id="webdesign">
<optgroup label="웹퍼블리싱">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">javascript</option>
<option value="jq">jquery</option>
<option value="rwd">responsive web</option>
</optgroup>
<optgroup label="웹디자인">
<option value="photoshop">photoshop</option>
<option value="illust">illustrator</option>
<option value="xd">xd</option>
</optgroup>
</select>
</p>
</fieldset>
5. datalist
제시한 값을 선택하면 자동으로 입력
기본 문법 예시
<datalist id="choice">
<option value="입력되는 값" label="제목"></option>
</datalist>
<fieldset>
<legend>
datalist태그
</legend>
<label for="interest">관심분야</label>
<input type="text" id="interest" list="choice">
<datalist id="choice">
<option value="grammer" label="문법"></option>
<option value="voca" label="어휘"></option>
<option value="speaking" label="회화"></option>
<option value="listening" label="리스닝"></option>
</datalist>
</fieldset>
관련 포스트
시멘틱 태그 (Semantic Tag)
[HTML] 시멘틱 태그 (Semantic Tag)
시멘틱 태그 (Semantic Tag) 의미가 있는 태그. header, footer 등 의미가 있는 태그는 내용을 명확하게 정의함 기존의 구조는 div로 대부분의 구조를 생성 구조에 div를 너무 많이 사용하게 되어 id나 class
regularly-study.tistory.com
참조 자료
https://www.w3schools.com/html/html_forms.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
728x90
반응형