⭐️ <form>~</form> 폼양식
- 폼 태그는 클라이언트 측에서 서버로 값을 전송할 떄 사용하는 태그이다.
- 안에 여러가지 값을 담을 수 있는 입력양식을 만드는 태그를 포함할 수 있다.
- 전송데이터의 단위를 선택한다.
- 어디로 보내는지 알 수 있다.
- 사용자의 입장에서 이거 해주세요라는것을 Swing에서는 번호로 프로토콜을 보냈는데 웹에서는 URL로 서버에게 보낸다.
<form name="form1" method="전송방식" action="전송된 데이터를 받는 곳">
/*... 입력 양식들
</form>✔️ method
: 데이터의 전송방식: get, post의 2가지 방식
: 어떻게 ?
✔️ action
: submit이 실행되면, 해당 URL로 데이터가 전송된다.
: 어디로 -> 뭘하는가?
📌 자세한 것은 여기로 ➡️ HTML Input Types
✏️ 폼요소를 이용해서 ID pw 메모 입력칸 만들기
라디오 버튼은 같은 이름끼리는 하나만 선택하게 되어있다.
ID: <input type="password" name="id">
ID:
Password:<input type="password" name="pw">
Password:
<input type="radio" name="sex" value="male"> 남자
<input type="radio" name="sex" value="female"> 여자
남자
여자
<textarea cols="30" rows="3" name="content"></textarea>
✏️ 입력 못하게 하기
readonly disabled 만 적어도 되지만 가능한 짝을 맞춰주기 위해 값을 적어준다.
ID: <input type="password" name="id" readonly="readonly">
ID:
➡️ 표시만 될 뿐, 입력이 되지 않는다.
Password:<input type="password" name="pw" disabled="disabled">
Password:
✏️ 체크 박스
당신의 취미는?
<input type="checkbox" name="hobby" value="독서"> 독서 ...
독서
여행
음악
영화
id를 적고 <label> -> 그냥 나열이 아닌 의미를 부여함 label를 선택하면 체크박스에 체크가 된다. (웹 접근성 향상)
❗️ label 선택해도 체크되게 하기
독서
웬만하면 value는 전송되는 값이기 때문에 웬만해서는 한글이 아닌 영어로 쓴다.
✏️ Option
<select name="car">
<option>당신이 구매하고 싶은 차종은?</option>
<option value="소나타">소나타</option>
<option value="에쿠스">에쿠스</option>
<option value="아반떼">아반뗴</option>
</select>-
<select name="car" size="4">
한번에 보여줄 개수 -> 4개
사이즈가 나타나면 list형식으로 된다. -
select name="car" size="4" multiple="multiple">
여러개 선택할 수 있다.
✏️ hidden
<input type="hidden" name="start" value="1">
사용자에게 안보이므로 개발자가 보는 것이다.
목적을 위해서 사용자를 위해 값을 넣는다든지에 대해 사용된다.
✏️ file
<input type="file" name="upload">
✏️ submit
✔️ 서버로 전송하는 역할
<input type="submit" value="upload">
✏️ reset
✔️ 초기값으로 되돌리는 역할
<input type="reset" value="취소">
✏️ image 버튼 입력 양식
같은 submit의 역할인데 글자가 아닌 그림으로 나온다.
✏️ button
✔️ 지정되지 않은 기능 버튼
나머지 버튼들은 기능이 정해져 있었는데 이것은 지정이 안되어있는 버튼이다.
개발자가 기능을 지정해서 만들어주는 버튼이다.
<input type="button" value="버튼">
