폼
사용자가 입력한 데이터를 서버 페이지에 제출
➡️ 서버 페이지는 전달한 값들을 받아서 처리
<form action = "서버 페이지경로" method = "전송방식">
</form>
폼 양식
폼의 id는 HTML에서 유일한 이름 지어주는 방법이기 때문에 중복되면 안 된다.
타입 submit는 데이터를 전송해준다.
<form action = "/webApp1/MyServlet" method = "post" name = "f" id = "myform">
<!-- id는 중복불가 -->
<input type = "submit" value = "데이터전송"> <!-- 폼 제출 버튼 -->
</form>
경로를 사진 파일로 변경하면 데이터 전송을 클릭할 때 아래와 같은 결과를 얻을 수 있다.
<h3>폼 양식(사진연결)</h3>
<form action = "/webApp1/img/naver.gif" method = "post">
<input type = "submit" value = "데이터전송">
</form>
폼 양식 종류
name 은 해당 데이터의 이름이다.
id : <input type = "text" name = "id"><br/>
pwd : <input type = "password" name = "pwd"><br/>
phone : <input type = "number" name = "phone"><br/>
color : <input type = "color" name = "color"><br/>
date : <input type = "date" name = "date"><br/>
각자의 input 은 오른쪽 사진과 같은 결과를 얻어낸다.
| text | 텍스트를 받아온다 |
| password | 텍스트를 암호화 처리해 보여준다 |
| number | 숫자만 입력할 수 있게 처리해준다. |
| color | 색상을 선택할 수 있다. |
| date | 날짜를 선택할 수 있다. |
체크박스
체크박스에서 실제로 전달되는 값은 value 값이다.
아래의 코드를 예로 들자면, 오렌지 키위 사과 배는 보여지는 내용이고 실제 연산에 사용되는 값은 value 값이다.
<input type = "checkbox" name = "ch" value = "1" checked> 오렌지
<input type = "checkbox" name = "ch" value = "2"> 키위
<input type = "checkbox" name = "ch" value = "3"> 사과
<input type = "checkbox" name = "ch" value = "4"> 배 <br/>
<!-- 실제로 전달되는 값은 value 값 -->
라디오 버튼
하나의 그룹으로 묶기 위해서는 name 을 같게 사용해야한다.
<input type = "radio" name = "ra" value ="f"> 여성복
<input type = "radio" name = "ra" value ="m"> 남성복
<input type = "radio" name = "ra" value ="c"> 아동복 <br/>
<!-- 하나의 그룹으로 묶으려면 name 을 똑같게 써줘야한다. -->
콤보 박스
<select name = "sel">
<option value = "a">1학년</option>
<option value = "b">2학년</option>
<option value = "c">3학년</option>
<option value = "d">4학년</option>
</select><br/>
여러 줄 입력
rows 와 cols 는 박스 크기만 지정한다. 즉 글은 이 값들을 넘어 작성할 수 있다.
<textarea rows= "5" cols="40">가입 인사를 남기시오</textarea><br/>
약관
회원가입 창의 약관 설명과 같은 것이 필요할때 사용하는 코드이다.
<iframe src="불러올 약관 파일 명" style = "width:300px; height:300px"></iframe><br/>
hidden
화면에 보일 필요없지만 서버에 전송해야 하는 값이 있을 때 사용한다.
<input type = "hidden" name = "h" value = "asdf">
버튼 button
onclick은 핸들러 등록하는 속성이 현재 이 버튼을 클릭하면 함수 a()를 호출하라는 의미이다.
<input type = "button" value = "일반버튼" onclick = "a()">
자바 스크립트의 알림 기능을 사용하면 버튼을 클릭했을 때 이와 같은 알림이 뜬다.
<input type = "button" value = "일반버튼" onclick = "javascript:alert('button click!!')">
초기화 reset
입력된 값을 초기화하는 양식이다.
<input type = "reset" value = "초기화">
데이터 전송 submit
폼을 제출하는 데이터 전송 버튼이다.
<input type = "submit" value = "데이터전송">
checked
value 값 뒤에 작성되는 checked 는 기본적으로 선택이 이미 되어있도록 적용하는 코드이다.
폼 양식 자바 스크립트 (JS) 로 불러내기
[JavaScript] 폼 양식 자바 스크립트 (JS) 로 불러내기
폼 양식 자바 스크립트 (JS) 로 불러내기 폼 양식을 자바 스크립트로 불러오는 문법이다. text, password, number 폼 받기 변수 html 에 위 문법을 사용해 값을 받고 html 변수를 출력하는 코드이다. 폼 양
skylarcoding.tistory.com
<script>
f.t1.value
// 폼이름.불러올input이름.불러올값
</script>-> 이름이 t1인 입력 양식의 값: f.t1.value
<body>
<!-- HTML의 폼 양식 -->
<form name = "f">
<input type = "text" name = "t1">
</form>
</body>
