1. Form 태그 속성
: form은 사용자의 입력값을 서버로 전송할때 사용되는 태그이다.
<body>
<form action = "http://localhost:8080/form.jsp" accept-charset="utf-8"
name = "person_info" method = "get">
</form>
</body>- action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.
- name : 폼을 식별하기 위한 이름을 지정합니다.
- accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.
- target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.
- method : 폼을 서버에 전송할 http 메소드를 정합니다.
1) GET : URL에 정보가 담겨서 전송된다.
2) POST : header의 body에 포함해서 전송된다.
2. Form을 구성하는 태그들
1) input 태그
: 사용자의 정보를 받을 수 있는 모양을 만들 수 있다.
<form action="/example.html" method="POST">
<input type="text" name="food" id="meal">
</form>- type : 태그 모양을 다양하게 변경할 수 있다.
1)text, radio, checkbox, password, button, hidden, submit, reset name: 태그 이름를 식별할때 사용된다.(페이지에서 고유해야함)id: name과 비슷하지만 주로 JavaScript, CSS 에서 식별하는 용도로 많이 쓰임(양식에서 고유해야함)- value : 버튼 등을 눌렀을때 받아 올 값을 지정한다.
- readonly : 태그를 읽기전용으로
- maxlength : 해당 태그 최대 글자 수를 지정
- required : 해당 태그를 필수태그로 지정, 필수 태그를 입력하지 않고, submit 버튼을 누르면 에러메시지가 웹 브라우저에 출력됨.(HTML5)
- autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동 (HTML5)
- placeholder : 태그에 입력할 값에 대한 힌트를 줌. (HTML5)
- pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용 (HTML5)
2) Label 태그
: input을 통해 만든 모양 옆에 설명해주는 라벨을 붙일 수 있다.
<form action="/example.html" method="POST">
<label for="meal">What do you want to eat?</label>
<input type="text" name="food" id="meal">
</form>3) select, option 태그
: 셀렉트 박스를 만들때 사용된다.
<form>
<label for="lunch">What's for lunch?</label>
<select id="lunch" name="lunch">
<option value="pizza">Pizza</option>
<option value="curry">Curry</option>
</select>
</form>- select : ID, Name
- Option : value
4) dalalist, option 태그
: 데이터 자동 완성 기능으로 미리 보여 준다.
<datalist id="sauces">
<option value="ketchup">Ketchup</option>
<option value="mayo">Mayo</option>
</datalist> - ID, Name
5) textarea
: 텍스트 필드를 만들 수 있다.
<label for="blog">New Blog Post: </label>
<textarea id="blog" name="blog" rows="5" cols="30">
</textarea>
- id, name, rows, cols
.jpg)
"꾸준한 삽질과 우연한 성공"