[html] form 태그 공부

front-end/html&css

[html] form 태그 공부

MOOB 2019. 8. 18. 17:55

FORM Tag

HTML에서의 입력 양식
- action 폼을 전송할 서버 쪽 스크립트 파일 저장
- name 폼을 식별하기 위한 이름 지정
- accept-charset 폼 전송에 사용할 문자 인코딩 지정
- target action에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정 ex)_blank
- method 폼을 서버에 전송할 메소드를 정함 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 안에 들어가는 값이 전송되는 값이다.