Web
HTML5 - 서식 (form)
DeFo
2020. 6. 9. 06:13
| 공부 환경 | |
| -혼자 간단하게 웹 페이지를 만들어 보고 싶어서 시작 -퇴근 후 짬짬히 -느리지만 꾸준하게 할 예정 |
👇
HTML5 이전 포스팅
더보기
👆
HTML5 서식 (form)
html에서 서식은 사용자의 입력, 선택 등 상호작용으로
서버에서 처리될 데이터를 입력받아 제공하는 역할을 하는 웹페이지 컴포넌트이다.
HTML5는 고급 폼 컨트롤러 기능을 제공한다.
모든 서식은 <form> 요소 내부에 정의
대부분 <form> 내부 <p> 안에 정의 됨
ex)
<form>
<p><label>방문자 이름 : <input></label></p>
</form>
form 요소의 속성
-서식 내용 어느 곳, 어떤 방식으로 전송할 것인지 지정
- action : 서식 내용 전송 시 내용이 전송되는 서버 파일의 URL
- method : 폼이 전송되는 방식으로 get과 post 방식이 있음
| get 방식 | post 방식 |
| -서버에 폼 데이터를 이름과 값이 결합된 형태로 전달 -URL 뒤에 전송 값이 추가 됨 |
-클라이언트(웹 브라우저)와 서버간의 약속된 형식으로 인코딩하여 서버로 전송 -URL에 전송 데이터가 노출되지 않음 |
- input : 다양한 타입의 입력 데이터 필드
text, password, radio, submit 등의 type이 있음
HTML5에서 url, tel, email 같은 구체적인 타입이 추가됨 - label : 서식 요소의 caption
label 요소의 두 가지 사용 형태 👇
* for 속성의 사용
<label for="name">이름 : </label><input id="name" type="text">
* label 요소 내부에 서식 요소 넣기
<label>닉네임 : <input type="text"></label>
label 요소 내부에 서식 요소를 넣을 때는 하나의 서식 요소만 넣는다.
input 요소들
*공통 속성 name : 서버에 전달될 서식 값의 이름. 필수 항목
주요 속성
- required : 서식 값이 반드시 입력돼야 하는 항목
- placeholder : 입력 폼에 짧은 힌트
- maxlength : 입력 값 최대 길이 설정
- autofocus : 폼 로딩 시 커서 위치 지정
<fieldset>
폼 요소들을 공통된 이름으로 그룹화함
웹 브라우저에서 선으로 테두리가 표시되어 구분됨
<legend> 요소를 이용하여 fieldset 그룹에 이름 지정
input 주요 속성과 <fieldset> 사용 ex)
<fieldset>
<legend>입력 양식</legend>
<input name="name" type="text" placeholder="꼭 입력해주세요." required autofocus>
<input name="password" type="password" maxlength = "30">
</fieldset>
input 요소 주요 타입
- radio : 나열된 여러 보기 중 하나만 선택하게 할 때 사용
- checkbox : 복수 선택이 가능한 입력 타입
- select : 선택 메뉴 리스트, option으로 선택 항목 값 지정
ex)
<p><label>휴대폰 번호</label>
<select name="tel">
<option value="010">010</option>
<option value="011">011</option>
<option value="017">017</option>
</select>
</p>- textarea : 여러 줄 텍스트 입력 및 편집
- button : 단추 생성 요소
-type="submit" 서식 제출
-teyp="reset" 서식 초기화
ex)
<p><button type="submit">등록하기</button><button type="reset">초기화</button></p>
내용은 모두 개인 공부 기록 용이기에 부족한 부분이나 내용상 오류가 있을 수도 있습니다.
참고용으로 보시기 바랍니다.
혹 잘못된 내용이 있을 시 댓글 남겨주시면 수정하도록 하겠습니다.