폼 만들어 보기
<form action="/member/login.do">
<fieldset>
<legend>로그인정보</legend>
ID : <input type="text"><br>
PW : <input type="password"><br>
<input type="submit" value="로그인">
<input type= "reset" value="취소">
</fieldset>
</form>- 적절한 type을 넣어줘야 한다.
- form action뒤의 주소로 내가 입력한 값이 전송된다.
<form action="/member/check.do">
text : <input type="text" name="" id=""><br>
password : <input type="password" name="" id=""><br>
submit : <input type="submit"><br>
reset : <input type="reset" name="" id=""><br>
<hr>
checkbox : <input type="checkbox"><br>
radio : <input type="radio" name="" id=""><br>
button : <input type="button" value="버튼">
<hr>
file : <input type="file">
</form>- 여러가지 종류의 버튼이 있다
- checkbox : 말그대로 체크하는 박스
- radio : 여러개중 하나만 선택할수있는 체크박스
- button : 버튼형식의 박스 누를수있다
- file : 파일을 첨부할수있다.
폼 세부설정
<form action="">
<input type="text" value = "쓸수 없습니다 " readonly> <br>
<input type="text" maxlength="6" placeholder="6자까지만 입력가능"
size = "20">
</form>- value값으로 쓰기전 초기값을 지정가능하다
- readonly를 입력하면 값을 입력할수없다.
- placeholder는 쓰기전 메세지를 보이게 하나 클릭하면 사라진다
- maxlength는 쓸수있는 글자수를 정할수있다.
- size 는 폼의 크기를 지정할수있다.
아이디와 비밀번호 전송
<form action="/student/check.do" method="get">
<fieldset>
<legend>로그인(Get)</legend>
id : <input type="text" maxlength="10" size = "20" placeholder="ID입력"
name="user-id"><br>
pw : <input type="password" size = "20" placeholder="비밀번호 입력"
name="user-pw"> <br>
<input type="submit" value="로그인">
<input type="reset" value="초기화">
</fieldset>
</form>- get방식의 전송은 보안의 위험이 있다.
<form action="/student/check.do" method="post">
<fieldset>
<legend>로그인(Post)</legend>
id : <input type="text" maxlength="10" size = "20" placeholder="ID입력"><br>
pw : <input type="password" size = "20" placeholder="비밀번호 입력"> <br>
<input type="submit" value="로그인">
<input type="reset" value="초기화">
</fieldset>
</form>- 로그인할대는 post방식으로 안전하게 전송해야 한다
- get일때 전송주소 : http://127.0.0.1:5500/student/check.do?user-id=user01&user-pw=pass01
- post일대 전송주소 : http://127.0.0.1:5500/student/check.do
- get일때는 주소에 아이디와 비밀번호가 노출되나 post일때는 노출되지 않는다
checkbox radiobutton
<form action="">
<fieldset>
<legend>좋아하는 음식(다중선택)</legend>
<label for="pizza-check"> 피자</label> <input type="checkbox" name="pizza" value="p" id="pizza-check">
<label> 치킨 <input type="checkbox" name="chiken" value="c"></label>
<label> 떡볶이 <input type="checkbox" name="toppoki" value="t"></label>
<label> 튀김 <input type="checkbox" name="fried" value="f"></label>
<input type="submit" name="" id="" value="전송">
</fieldset>
</form>
<br>
<form action="">
<fieldset>
<legend>취미생활</legend>
<label> 코딩 <input type="radio" name="hobby" values="coding"></label>
<label> 수영 <input type="radio" name="hobby" values="swim"></label>
<label> 골프 <input type="radio" name="hobby" values="golf"></label>
<label> 야구 <input type="radio" name="hobby" values="basball"> </label><br>
<input type="submit" name="" id="">
</fieldset>
</form>- 체크박스에는 각각의 네임이 다르다, 서버에서는 벨류값을 인식한다
- 라디오박스는 하나만 선택할수있다, 네임값이 전부 같아야 name중에 하나만을 선택했다는것을 서버가 인식할수있다.
- 네임값이 다르면 다 다른것으로 인식하기때문에 다른네임값은 별개로 인식해 다중선택할수있어 의도한 결과와 다르게 나온다
- lable태그
- 체크박스를 클릭하여 선택할수있는 영역을 지정한다
<lable>값 <체크박스 태그></label>로 지정하여 값을 클릭해도 체크박스가 선택된다<lable for=id값>값<체크박스태그 id=id값>으로 체크박스와 떨어져있어도 해당 id가 지정된 모든 값들을 선택하면 id의 체크박스를 선택할수있다
html5에서 사용되는 폼 태그
<form action="">
색상 : <input type="color"><br>
날짜 : <input type="date"><br>
날짜와 시간 : <input type="datetime-local"><br>
시간 : <input type="time"><br>
주를 기준으로 날짜 선택 : <input type="week"><br>
검색 : <input type="search" required><br>
이메일여부 확인 : <input type="email"><br>
범위 선택 : <input type="range"><br>
<input type="submit" value="전송">
</form>- color = 색상선택
- date = 날짜 선택
- datetime-local 로컬시간으로 날짜 시간 선택
- time 시간선택
- week 주를 기준으로 시간선택
- search 검색 :
- required는 반드시 입력해야 하는 값
- email : 이메일 여부를 확인하여 이메일 형식이 아니면 전송되지 않게 한다
- range : 값의 범위를 슬라이드바로 선택할수있으나 대부분의 브라우저에서 실행되지 않는 경향이 있다.
select box
- 여러가지 선택지중에 하나를 체크형식이 아닌 박스 형식으로 고른다.
<form action="">
<fieldset>
<legend>직업을 선택하세요 : </legend>
<select name="job" id="">
<option value="doc">의사</option>
<option value="judge">판사</option>
<option value="gladiator">검사</option>
<option value="educator">강사</option>
</select>
<input type="submit" value="전송">
</fieldset>
</form>- select는 name값을 지정하여 아래 모든 셀렉트태그 안의 분류를 저장한다
- 선택한 value값이 전송된다.
옵션그룹
<select name="" id="">
<optgroup label ="자바">
<option value="">캡슐화</option>
<option value="">다형성</option>
<option value="">상속</option>
</optgroup>
<optgroup label ="SQL">
<option value="">DML</option>
<option value="">DQL</option>
<option value="">DDL</option>
</optgroup>
</select>셀렉트 박스안에 그룹을 만들어 구분하여 선택하도록 한다.
그룹이 눈에 보이는것을 제외하고는 크게 달라지는것은 없다.
검색가능한 select
<fieldset>
<legend>좋아하는 브라우저 선택</legend>
<input type="text" list="browers">
<datalist id="browers">
<option value="IE"></option>
<option value="Enge"></option>
<option value="Chrome"></option>
<option value="While"></option>
</datalist>
</fieldset>- 셀렉트 박스 안에 검색을하면 내가 선택하고자 하는 값을 입력하면 가장 유사한 값이 검색되어 선택할수있따
- 지정된 값 외에는 선택되지 않은며 다른값을 검색시 선택할수 없다.
내용입력받는 폼
<form action="">
제목 : <input type="text" name=""><br>
내용 : <br><textarea name="" id="" cols="40" rows="15"></textarea>
</form>- cols : 행의 갯수
- rows : 열의 갯수
- 보이는 크기이지 입력은 더 할수있다.
실행결과 : 폼태그 (hana78786.github.io)
hello world