html 입력양식 - 실제로 데이터를 받는 부분
html문서는 방식에따라 서버->사용자에게 일방적으로 보여주는방식과 사용자->서버에게 데이터를 보내느 방식
form을 이용하여 서보로 데이터를 전달한다.
<Form>
이 폼 안에있는것들이 서버로 전송이 됨
</Form>
JSP : java server page : 자바언어와 화면쪽 스크립트를 같이 쓸수있는 페이지
action은 보내고자하는 서버페이지. 서버주소나 .jsp처럼 화면관련된페이지일수도있음
method는 post get 두가지 방식인데 어떤방식으로 보낼것인가
get방식은 url 주소뒤에 파라미터를 붙여서 데이터 전달
?id="a001"&pw="111" 이런식.. 보안상문제때문에 요즘은 쓰지x
?는 서버로 전송하는 데이터라는 말임 &로 파라미터 구분
post방식은 http request 헤더에 포함시켜서 전송한느 방식. 길이제한이 없고 보안이 유지됨
<input>은 닫는태그가 없음
<input> 사용자의 입력을 받는 요소 (type, value, name 세개는 따라다님)
type: 입력필드의 종류.. text는 텍스트입력할수있는 한줄짜리 필드. password, submit은 제출버튼
value는 그 인풋에 들어간 데이터
name 은 서버에 전달되는 속성 (매우중요)
ex ) 회원갑화면에서
생일 ( 0614 )
핸드폰번호 ( 010-1111-1111 ) 를 입력받을거임
<input type="text" name="birth"> 사용자의 입력을 받아야하는부분이니까 value값은 없음
<input type="text" name="hp">
birth라는 속성의 값이 0614가 들어가게됨
hp라는 속성(파라미터)로는 010-1111-1111이 서벌 ㅗ전송됨
나중에 request ("birth")를 하면 그 값인 0614가 나오는거임
타입중에 button, reset, submit 세개 다 버튼인데 버튼은 그냥 버튼
submit은 form태그 안에서 submit을 쓰면 폼안의요소에서 엔터를 눌렀을때 submit을 누른적처럼 나옴
reset이라고 놓으면 이 form이 초기화됨
hidden 도 많이 씀. 사용자에게는 보이지않지만 서버로 전송된다
ex) 로긴하고 게시들등록할때 누가 작성했는지 id.. 화면상에 아이디를 입력하는 부분은 없지만 페이지에 숨겨져있어야한다.
<!DOCTYPE html>
<html>
<head>
<title>FORM연습</title>
</head>
<body>
<form action="input.jsp" method = "post">
<input type="text" name="input">
<input type = "submit">
</form>
<hr>
<p>get방식 form</p>
<form action="aaa.jsp" method="get">
이름 : <input type="text" name="name"><br>
학번 : <input type="text" name="number" maxlength="10"><br>
<input type="submit" value="전송">
</form>
<hr>
<p>post방식 form</p>
<form action="aaa.jsp" method="post">
이름 : <input type="text" name="name"><br>
학번 : <input type="text" name="number" size="10"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
size=10이 무슨말일까? >>size 대신 maxlength였따! (실제로 많이쓴다)
비밀번호 : <input type="password" name="pass"><br>
성별 : 남<input type="radio" name="gender" value="M"> 여<input type="radio" name="gender" value="F"><br>라디오 버튼들의 name을 맞춰줘야 그룹이 되어서 이중에 하나를 선택가능함
사용자가 남성을 선택하고 전송하면 gender라는 name으로 값이 M이 전송이됨
체크박스
<input type="checkbox">
체크박스는 여러개 선택할 수 있다.
연령대 : 10대<input type="radio" name="old" value="10">
20대 <input type="radio" name="old" value="20">
30대<input type="radio" name="old" value="30">
기타<input type="radio" name="old" value="0"> <br>
좋아하는 과일 : 사과<input type="checkbox" name="fruit" value="apple">
포도<input type="checkbox" name="fruit" value="grape">
오렌지<input type="checkbox" name="fruit" value="orange">
아보카도<input type="checkbox" name="fruit" value="abocado"><br>
선택한 값들이 배열로 저장ㄷ이 되어서 오게 됨.
file도 한번 넣어보자
<form action="aaa.jsp" method="post" enctype=""multipart/form-data">
파일 첨부 <input type="file" accept="image/jpg,image/png" name="attachfile">
<input type="button" value="계산" onclick="alert('1000원입니다')">on~이라고 시작하면 이벤트라고 생각하면 됨. 이 element의 어떤 행위가 일어났을때 event라고 한다.
alert : 메세지를 보여주는 함수임. 메세지박스. 이미 저장된 함수. 확인버튼밖에없음. 그냥 정보전달하고 끝나는거임
alert(); 안에 숫자는 그냥(1000)인데 문자쓰고싶을떈 ("비번오류")라고 써도 되고 ('비번오류')라고 써도 됨
그런데 <input onclick="alert()">이미 " " 안이니까 ( ) 안에는 ' '로 쓰는게 좋음
confirm : 사용자에게 yes/no를 입력받는거임
<input type="button" value="선택" onclick="confirm('yes or no?')">
확인/취소에 따라 true/false가 리턴됨
reset
<input type="reset" value="리셋">
form에 입력값이 다 지워지는 버튼임
숨겨진 입력 <type = "hidden"> ***많이 쓸거임
<input type="hidden" name = "class" value="406">
화면에 아무것도 나오지 않음.
관리자모드 F12
오류나면 f12-콘솔을 먼저 보는거임
그 외에도
<input type="color" name="color">
<input type="date" name="date">
생년월일, 나이 꼐산하는 기능은 서버쪽의 서버시간으로체크해야한다.
input의 속성으로 type value name들을 줘봤는데 이 외에도 checked : 체크박스에서만 쓸수있음. checked라고 넣어주면 선택이됨
checked라고만 줘도 되고 checked="checked"라고 줘도 됨
disabled 가지않지않다. 불가능한. 컨트롤할수없는
disabled는 그 항목을 빼고 서버로 전송이 된다. disabled 말고 readonly로 하면 서버로 간다.
사과<input type="checkbox" name="fruit" value="apple" disabled>
readonly : 읽기전용이라는 뜻임
이름 : <input type="text" name="name" readonly="readonly" value="읽기만하쇼"><br>
입력할 수 없다.
pattern : 형식을 정규식으로 정해주는것 ex 특수문자나 한글이 입력되지않게
required : 필수항목
나중에 submit버튼눌렀을때 필수항목 빠져있으면 오류가 난다.
하지만 submit버튼을 안쓰기 때문에 별로 의미가 없음
추가된 입력속성(중프떄 쓸만한거)
autocomplete, autofocus(페이지로드시 자동으로 입력포커스를 갖는다., placeholder(입력힌트 희미하고 보여줌)
학번 : <input type="text" name="number" maxlength="10" placeholder="000000"><br>
autofocus가 없으면 script로 포커스를 주기도 한다.
input 말고도 폼을 만들때 사용하는 요소들이 있다.
<input><button><img>
<input type="button">이나 <button> 같은데 스타일이 조금 다르다
button태그는 value속성이없다. button은 닫는태그가 필요하다
<input type="button" value="선택" onclick="confirm('yes or no?')">
<button type="button" onclick="alert('누르셨군요');" name="button" >버튼!</button>
button의 타입을 안적으면 기본으로 submit이 되는거임
button 쓸때는 <button type="button" 꼭 써주기!
<textarea> : 여러줄의 문자를 입력
고객의 의견<br>
<textarea name="feedback" rows="5" cols="50"></textarea><br>
<select> 콤보박스, 드랍다운 리스트라고도 함
<select name="cars">
<option value="BMW">BMW</option>
<option value = "BENZ">BENZ</option>
<option value="KIA">KIA</option>
<option value = "HTUNDAI">HYUNDAI</option>
</select><br>
select도 라디오박스처럼 한개만, 체크박스처럼 여러개선택하게할수도있음
multiple을 쓰면 여러개를 선택할수있다고한다...
<select name="cars" multiple >
selected는 checked랑 비슷하다. option하나에넣어주면 미리 선택되어 나온다.
<fieldset> 예전의 방식임. 지금은 div로 묶는다든가... 하지만 시험문제에 나온다는거
<fieldset>
고객의 의견<br>
<textarea name="feedback" rows="5" cols="50"></textarea><br>
<select name="cars" multiple >
<option value="BMW">BMW</option>
<option value = "BENZ">BENZ</option>
<option value="KIA" selected>KIA</option>
<option value = "HTUNDAI">HYUNDAI</option>
</select><br>
</fieldset>
<fieldset> <legend>기타입력사항</legend> 고객의 의견<br>
라디오버튼이나 체크버튼은 글자클릭말고 그 박스만 클릭해야하니까 힘들다...
글자까지 범위를 넓혀줄수있을까?
<label> : <input>요소를 위한 레이블을 정의함
모든 엘리먼트에는 id를 쓸수있고, 중복되면 안되기떄문에 다 쓰지않고 컨트롤이 필요한 경우에만 id를 써준다.
서버로 전송하는 경우에는 네임을 꼭 써준다.
<label for="id값"> </label>
<label for="genderM">남</label><input type="radio" name="gender" id="genderM" value="M"> 
남은 글자 남만 클릭해도 라디오박스가 클릭이 된다. 여성은 적용안시켜서 동그란 라디오 버튼 눌러야지만 됨
이메일:<input type="email" name="email" required><br>
tel
전화번호:<input type="tel" name="tel" required
pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}"
title="010-1111-1111"><br>
'학원수업_Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글
| java script (0) | 2020.11.30 |
|---|---|
| 1127 POSITION (0) | 2020.11.27 |
| 1126 (0) | 2020.11.26 |
| CSS (0) | 2020.11.25 |
| 1123 (0) | 2020.11.23 |