HTML-form
1. <form>
정보를 입력 하는 영역
[폼 동작 방식]- 웹 페이지에 있는 form 데이터 입력
- 웹 서버로 이동
- 필요에 따라 app서버로 이동
- DB에서 CRUD 작업 처리 후 web 또는 app으로 전송
* CRUD(Create Read Upadate Delete) - 브라우저는 Response 받은 페이지 렌더링 후 클라이언트에 전달
* CRUD(Create Read Upadate Delete)
*form 속성
action: 입력 값을 전송할 페이지
method: 데이터 전송 방법을 선택
method | 설명 |
---|---|
get | 입력값이 url로 요청되어 보여짐 |
post | 입력값이 body로 요청되어 정보를 숨겨줌 보안이 필요할 때 사용 ex) 이미지, 게시물, 로그인 등 |
2. <input>
form태그 안에 쓰이면서 사용자가 정보를 입력할 수 있는 공간을 만들어줌
*input 속성
📌 required: radio는 첫번째 input에만 설정/ checkbox는 필요한 input에 개별 설정
*input type 속성
📌 tel, email은 보기에 text랑 같지만, 모바일에서는 다르게 보임
3. <label>
input앞의 텍스트로 설명해주는 역할
label은 input에 꼭 넣어야 시각장애인들을 위한 설명을 읽을 수 있다.
구현방법 1) input을 감싼다
<label> 이름 : <input type="text" name="name"> </label>
구현방법 2) lable에 for="input 또는 select의 id" 지정
<label for="myName">이름 : </label> <input type="text" name="name" id="myName">
📌 label에는 id만 가능! (class X)
💙 for 속성 장점💙
radio나 checkbox type 등에서 label텍스트를 눌러도 체크가 됨(사용 편리)
4. <select>
드롭다운 리스트 박스 생성
multiple="multiple"은 여러 옵션 선택 가능(ctrl 또는 Cmd를 눌러야 함)
size 속성: 한번에 보여 줄 옵션 갯수
4-1. <option>
value: 선택 시 서버에 전송할 값
selected: 기본으로 옵션 체크
(미설정시 첫번째 옵션이 미리 선택됨 and 데이터 전송 시 첫번쨰 옵션 값으로)
<form action=""> <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label> <select name="device" id="myDevice"> <option value="iphone">아이폰</option> <option value="galaxy">갤럭시폰</option> <option value="ㅜㅜ">LG폰</option> </select> </form>
4-2. <input>
name VS <option>
value
ex) tel(name): 010-1111-1111(value)
input의 name은 'key'
method가 get일 때 url에 ex) tel(name)=010-****-1111(value)
나중에 백엔드 개발자와 협의하여 정함
post일 경우 f12>페이로드에서 확인 가능
option value는 서버로 보내지는 값
일반 input은 직접 value 값을 설정할 수 있지만,
option은 선택만 가능하고 직접 value값 지정을 못해서 사용
📌 서버에 값 안 주기
<option value="" selected>선택</option>>
5. <fieldset>
폼 컨트롤들 그룹화(여러 섹션 구분 시 유용)
section과 같은 역할
6.<legend>
fieldset의 이름
꼭 <fieldset>
다음에 설정
폼의 제목을 텍스트로 보여줌
7. <button>
<button type="">
- submit: 서버로 데이터 제출(미지정 시 자동 제출), form 안의 key:value 값 서버로 전송
- reset: form 초기화
- button: 클릭만 가능함, 별 기능 X
💙💙 button에는 꼭 type 선언해야!!!! 정확한 코딩
💙 input submit과 button submit의 차이점
- input은 열린 태그라서 자식 태그 삽입 불가능(꾸미기 힘들다.)
- button은 닫힌 태그라 자식태그로 img 삽입 + 글꼴 설정 + after/ before 가상 요소 등 꾸미기 용이
🌷 나름 나의 정리
순서
1. 필드셋 설정
2. legend로 폼 제목 결정
3. input과 label을 이용하여 폼 구성하기
<legend> 폼 제목</legend>
<label for="myID">아이디</label>
<input type="text name="아이디" id="MyID">
.
.
.
</fieldset>
8. <textarea>
여러 줄의 텍스트 입력 받음
- cols(열): 입력창 너비, 문자의 평균적인 넓이를 기준으로(글자 수 기준 X),
양수 값만 가능(font, 언어마다 글자 넓이가 다르다)
- rows(행): 입력창 줄 수
9.<datalist>
- select와 input 혼용 가능
- label for -> input의 id/ input list-> datalist의 id와 연결
- 옵션기능을 제공
- 사용자가 원하는 옵션이 없으면 직접 입력 가능한 서비스 제공
Author And Source
이 문제에 관하여(HTML-form), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@greenth322/HTML-form저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)