[HTML] form
from
method : 데이터 전송방식 설정
action : from에서 submit이 발생하면 실행될 파일명
- get(주소창에 값 보임, 기본값)
- post(주소창에 값 안 보임)
↓ form태그 내에 있는 것들은 모두 post형식, tel은 get형식
<!-- post형식 submit이 발생하면 aaa.jsp파일을 실행한다. -->
<!-- get방식과 함께 쓰려면 ?와함께 같이 쓴다. -->
<from method="post" action="aaaa.jsp?tel=010-1234-5678"> </from>
text 타입 : 메시지 입력
<form>
아이디 : <input type="text" name="userid" placeholder="id를 입력하세요" size="10" required/>
아이디2 : <input type="text" value="읽기 전용" readonly/><br/>
이름 : <input type="text" name="username" value="홍길동" disabled><br/>
</form>
name : 서버에 보낼 변수명
value : 값
placeholder : 미리보기와 비슷함, 값을 입력하면 사라짐
size : text 칸 크기 설정
readonly : 읽기전용
disabled : 비활성화(readonly와 다름 -> 서버에서 request 할 수 없다.)
password 타입 : 비밀번호
file 타입 : 파일 첨부
<form>
비밀번호 : <input type="password" name = "userpwd" required/><br/>
파일 첨부 : <input type="file" name="filename"/>
</from>
required : 필수로 작성해야 하는 입력란
required로 설정된 타입에 값이 입력되지 않으면 submit할 수 없음
마우스 오버하면 입력란을 작성하라는 문구가 뜬다.
maxlength : 글자수 최댓값 제한
checkbox 타입 : 사각형, 다중 선택 가능
radio 타입 : 원, 다중 선택 불가능
<form>
체크박스 : <input type="checkbox" name="hobby" value="농구" checked/>농구
<input type="checkbox" name="hobby" value="축구"/> 축구<br/>
라디오버튼 : <input type="radio" name="email" value="yes"/> 동의
<input type="radio" name="email" value="no"/> 비동의<br/>
</form>checked : 선택되도록 지정
textarea 타입 : 여러 줄의 문자를 입력받는 타입
<form>
여러줄의 문자 입력 : <textarea name="memo" cols="50" rows="5">글을 입력하세요.</textarea><br/>
</form>
cols : 가로
rows : 세로
<select>
<option> : 리스트박스 생성
<form>
<!-- value가 없으면 option 태그 사이에 있는 문자가 전송된다. -->
리스트박스 : <select name="language" size="5" multiple>
<option value="java">자바</option>
<option>자바스크립트</option>
<option selected>html</option>
<option>css</option>
<option>jsp</option>
</select><br/>
</form>
selected : 리스트가 미리 선택됨 (checked와 비슷)
size : 정해진 개수만큼 목록이 보이도록 함
multiple : 다중 선택 가능
리스트 그룹
<optgroup>
<form>
리스트 group :
<select name="lang">
<optgroup label="프론트엔드">
<option>자바스크립트</option>
<option>자바</option>
<option>css</option>
</optgroup>
<optgroup label="백엔드">
<option>html</option>
<option>jsp</option>
</optgroup>
</select>
</form>optgroup : 옵션들을 분류해주는 기능
date 타입 : 년월일 (보이는대로 입력됨)
datetime-local 타입 : 년월일시분초
month 타입 : 년월
week 타입 : 주(1년 기준)
<form>
date : <input type="date" name="data"/><br/>
datetime-local : <input type="datetime-local" name="date2"/><br/>
mont : <input type="month" name="month"/><br/>
week : <input type="week" name="week"/><br/>
</form>color 타입 : 색상 선택
number 타입 : 숫자 선택(증감 가능)
range 타입 : 숫자 선택
<form>
color : <input type="color" name="color"/><br/>
<!-- 10부터 20까지 2씩 증감 -->
number : <input type="number" name="num" min="10 max="20" step="2"/><br/>
range : <input type="range" name="ran" min="0" max="10" step="1" value="5"/><br/>
</form>
등록 [ button, submit, image, button태그 ]
button 타입 : 그냥 버튼만
submit 타입 : form 안에 required인 input을 다 입력해야 전송됨
button 태그 : submit와 동일 기능을 가짐
image 타입 : submit와 동일 기능을 가짐
reset 타입 : from 안에 있는 데이터 모두 리셋
<form>
<input type="button" value="등록"/>
<input type="submit" value="등록"/>
<button>등록</button>
<input type="image" src="../img/제목 없음.png"/>
<input type="reset" value="다시쓰기"/>
</form>