FORM Tag
HTML에서의 입력 양식
action폼을 전송할 서버 쪽 스크립트 파일 저장name폼을 식별하기 위한 이름 지정accept-charset폼 전송에 사용할 문자 인코딩 지정targetaction에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정ex)_blankmethod폼을 서버에 전송할 메소드를 정함get이나post
get과 post 방식의 차이
<form action = "http://localhost:8080/form.jsp" accept-charset="utf-8" name = "person_info" method = "get"> </form>
폼을 구성하는 엘리먼트
fieldset: 폼 태그 안에 관련있는 폼 엘리먼트를 그룹화 할 때 사용.legend태그를 하위에 사용하여 그룹화 한 폼을 목적에 맞게 이름을 지정할 수 있다.개인 정보 입력 이름 :
나이 :
<body>
<form action = "#" accept-charset="utf-8" name = "person_info" method = "get">
<fieldset style = "width:150">
<legend>개인 정보 입력</legend>
이름 : <input type = "text" name = "name"/><br><br>
나이 : <input type = "text" name = "age"/><br><br>
</fieldset>
</form>
</body>
tag 속성
type: 태그 모양을 다양하게 변경할 수 있습니다. type에는 text, radio, checkbox, password, button, hidden, fileupload, submit, reset 등을 지정할 수 있습니다.text: 일반 문자password: 비밀번호button: 버튼submit: 양식 제출용 버튼reset: 양식 초기화용 버튼radio: 한개만 선택할 수 있는 컴포넌트checkbox: 다수를 선택할 수 있는 컴포넌트file: 파일 업로드hidden: 사용자에게 보이지 않는 숨은 요소
name: 태그 이름을 지정readonly: 태그를 읽기전용으로 합니다.maxlength: 해당 태그 최대 글자 수를 지정합니다.required: 해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지 않고, submit 버튼을 누르면 에러메시지가 웹 브라우저에 출력됩니다. (HTML5 추가사항)autofocus: 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됩니다. (HTML5 추가사항)placeholder: 태그에 입력할 값에 대한 힌트를 줍니다. (HTML5 추가사항)pattern: 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용합니다. (HTML5 추가사항)
목록 태그 속성
<select>: 항목을 선택할 수 있는 태그속성
size: 한 번에 보일 항목 길이속성
multiple: 다중 선택 허용 여부 설정하위 tag
<optgroup>: select tag 안에서 목록들을 그룹화 할 경우 사용label을 사용하여 이름을 지정할 수 있다.- 하위 태그
<option>: select tag 안에 들어가는 선택 가능한 목록value안에 들어가는 값이 전송되는 값이다.
- 하위 태그
'front-end > html&css' 카테고리의 다른 글
| [css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element) (0) | 2020.01.31 |
|---|---|
| [css] 자식요소가 float / absolute 일 때 부모 요소 height, width 주기 (0) | 2020.01.30 |
| [html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 (2) | 2020.01.23 |
| [CSS] 반응형 박스 만들기 / 화면의 크기가 변해도 모양이 망가지지 않도록 (0) | 2020.01.22 |
| 프론트엔드 개발자 면접 질문 모음 (1) | 2019.08.15 |
댓글