1. Form 태그란?
로그인, 회원가입, 글쓰기 등 관리할때 사용되는 즉, 폼안에 입력된 데이터를 서버로 전달해서 처리하도록 만들어주는 태그다.
1-1) form 태그 속성
- method : 폼을 전송할 방식으로 'post' / 'get' 두 가지가 있다.
1) post : 전송하는 정보를 암호화하여 보내는 형식, 즉 url주소에 폼 데이터가 보이지 않는다.
2) get : 오픈된 형식, 즉 url주소에 폼 데이터를 붙여서 보내는 방식 - name : 하나의 웹 문서안에 여러 개의 폼이 있을 수 있으므로 폼을 식별하기위해 폼의 이름을 지정한다.
- action : 폼을 전송할 서버의 스크립트 파일을 지정한다.
- onsubmit : action 속성을 활용하지않고, onsubmit 이벤트를 활용해서 스크립트로 처리가 가능하다.
- target : 스크립트 파일을 현재의 창이 아닌 다른 위치에서 열리도록 지정할 수 있다.
- autocomplete : 폼 내부 요소의 자동 완성 기능을 사용할지 안할지 결정한다.
1-2) form 태그와 함께 사용되는 태그
1. input 태그
form 태그 내에 존재해야하며 입력 데이터를 전송하는 태그이다.
✅ input태그의 종류 (type)
0) submit
클릭하면 컨트롤들의 데이터 값을 서버로 전송하게 된다.
<form action="action.jsp">
<div><input type="submit" value="전송"></div>
</form>1) button
button type은 value 속성과 onclick 속성을 주로 사용하고, value 속성은 버튼에 어떠한 글자를 보여줄지를 설정하고, onclick 속성은 버튼을 눌렀을 시 어떠한 이벤트를 발생시킬지 설정하는 속성이다.
```html
<form>
<input type="button" value="click!" onclick="alert('click button!')">
</form>```2) checkbox
checkbox type은 name, value, checked 등과 같은 속성을 가지는데, name은 말 그래도 checkbox의 이름이 되고, value는 checkbox의 값이 된다. 그리고 checked 속성은 웹 페이지를 열었을 때 checkbox가 체크된 상태로 되도록 하는 속성이다.
<form action="action.jsp">
<p>주문 음식을 표시하세요</p>
<div><input type="checkbox" name="food01" value="mandoo" checked>만두</div>
<div><input type="checkbox" name="food02" value="jjajang">짜장</div>
<div><input type="submit" value="전송"></div>
</form>3. radio
여러 개의 선택지 중에 하나를 선택하게 할 때 사용한다. checkbox와 동일하게 name, value, checked 속성을 갖는다. 다만 checkbox와 다른 점은 같은 묶음의 radio는 name이 같아야 한다. name이 달라지면 다른 radio 묶음으로 인식하게 된다.
<html>
<body>
<form>
<input type="checkbox" name="check1" value="apple" checked> 애플
<input type="checkbox" name="check2" value="samsung"> 삼성
<input type="checkbox" name="check3" value="meta"> 메타
</form>
</body>
</html>2. label 태그
해당 폼 요소에 어떤 값을 넣어야 하는지 이름을 붙이는 요소이다. 라벨은 꼭 명시 하는 것이 좋으며 라벨이 들어갈 공간이 없을 경우 해당 입력 요소에 title 속성이라도 명시하는 것이 좋다.
<label for="id">아이디 입력</label>
<input type="text" id="id" />3. fieldset 태그 & legend 태그
폼 내부에 여러 구역을 나누어 표시할 때 사용한다.
2-1) fieldset : form 내부에서 관계된 요소들끼리 묶어주며 그룹화 하는데 그룹화 된 주위에 얇은 테두리를 이용하여 박스를 그린다. 주로 해당 그룹의 이름을 정할 수 있는 <legend>와 함께 쓰인다.
2-2) legend : <fieldset>에 제목을 달아주는 역할을 한다. 이러한 폼 요소들의 그룹화는 스크립트에서 접근 시 보다 용이하게 만들어주며 사용자의 접근성 또한 높여준다.
ex)
text 와 password 아이디 :패스워드 :
<form>
<fieldset>
<legend>text 와 password </legend>
<label for="name">아이디 : </label for="name"><input type="text" id="userid"><br>
<label for="name">패스워드 : </label for="name"><input type="password" id="password">
</fieldset>
</form>💡참고 및 발췌 : https://daily-life-of-bigone.tistory.com/19
