웹 페이지 내에서 사용자로부터 입력을 받을 때에는 <form> 태그를 사용한다.
<form> 태그를 사용하면 사용자가 입력한 데이터를 다른 페이지로 전송하거나 페이지 내에서 사용할 수 있다.
<form action="[데이터를 전달할 URL or 페이지 경로]" method="[전송방식]" name="[form이름]"> 입력 양식 </form>
일반적으로 위와 같이 작성한다.
action: 전송 버튼을 눌렀을 때 form의 내용이 전달되는 URL을 지정한다. 생략 시 현재 페이지로 지정된다.
method: 전송방식을 설정한다. 생략 시 get방식으로 설정된다.
★전송방식: get, post, delete,... 등이 있으며 일반적으로 get방식과 post방식이 사용된다.
입력 양식: <input>, <select>, <datalist>, <progress>, <fieldset>,... 이 있다.
<input>
<input> 태그는 입력받기 위해 사용되는 태그이다.
<input type="[타입명]">을 기본 형식으로 사용된다.
input 태그의 속성
size : 글 상자의 크기
maxlength : 값의 최대 길이
placeholder : 사용자의 입력 이전에 보여줄 기본 값
readonly : 수정할 수 없도록 설정
name : 요소의 이름을 설정 (파라미터의 KEY값)
value : 미리 값을 지정 (파라미터의 VALUE값)
required : 필수 항목
input 태그의 type
text : 텍스트 입력
password : 보이지 않는 텍스트 입력
radio : 여러 개의 옵션 중 단일 선택
checkbox : 여러 개의 옵션 중 다중 선택
file : 파일 전송(첨부)
email : 이메일 입력 (@가 포함되어야 한다.)
date : 날짜 선택 (브라우저별로 다른 UI로 선택)
color : 원하는 색상 선택
URL : URL 입력 (//로 입력한다.)
tel : 핸드폰 번호 입력
number : 숫자 입력 (수치를 조절할 수 있는 버튼이 존재한다.)
number type의 속성 : min(최솟값), max(최댓값), step(버튼으로 증감하는 단위)
range : 입력 범위 안의 값만 입력 (범위를 선택하는 바가 생성)
search : 검색어 입력 (입력 칸 우측에 x버튼이 생긴다.)
submit :누르자마자 action으로 이동하는 버튼
reset : 초기화 버튼
button : 눌렀을 때 action으로 이동하지 않고 지정한 액션을 행한다. (일반적인 button태그와 다르다.)
See the Pen abBvgBK by Heekng (@heekng) on CodePen.
<select>
<select> 요소는 어러 개의 옵션이 드롭다운 리스트로 되어 있다.
리스트 중에서 단 하나의 옵션을 입력받을 수 있다.
<option> 요소를 이용하여 옵션 리스트를 설정한다.
<select name="[요소명]"> <option value="내부 값">외부 표현 값</option> <option value="내부 값">외부 표현 값</option> </select>
위와 같은 형태로 사용한다.
See the Pen vYyNqqN by Heekng (@heekng) on CodePen.
<textarea>
<textarea> 요소는 여러 줄의 텍스트를 입력받을 수 있는 문장 요소이다.
<textarea cols="가로글자수크기" rows="세로 글자수 크기">기본 값</textarea>위의 형태로 작성한다.
See the Pen KKNdOge by Heekng (@heekng) on CodePen.
<datalist>
<datalist> 요소는 미리 지정된 옵션 목록을 제공한다.
일정 부분은 <select>와 비슷하지만 사용자가 입력함에 맞추어서 옵션 리스트를 보여주고 선택할 수 있게 도와준다.
<input type="text">와 함께 사용한다.
<input type="text" list="[datalist id]"> <datalist id="[datalist id]"> <option values="내부 값">외부 표시값</option> <option values="내부 값">외부 표시값</option> <option values="내부 값">외부 표시값</option> <option values="내부 값">외부 표시값</option> ... </datalist>위의 형태로 작성한다.
See the Pen VwmvoQK by Heekng (@heekng) on CodePen.
<progress>
<progress> 태그를 이용하면 진행 정도를 나타낼 수 있다.
진행 정도는 막대에 게이지가 차듯이 표현한다.
<progress value="현재값" max="최대 값"></progress>위 형태로 작성한다.
See the Pen YzpymvN by Heekng (@heekng) on CodePen.
<fieldset>, <legend>
<fieldset> 요소는 폼 필드 내에서 서로 관련 있는 폼 필드 세트를 표시한다.
단순하게 여러 요소들을 묶어서 표시하는 상자를 만드는 것이다.
<legend> 요소를 이용하여 fieldset의 이름을 표시할 수 있다.
<fieldset> <legend>[fieldset이름 또는 원하는 문자열]</legend> [form 요소 추가] [form 요소 추가] ... </fieldset>위 형태로 작성한다.
See the Pen zYovgbG by Heekng (@heekng) on CodePen.
HTML의 form action, JavaScript의 onsubmit()을 활용하면 다음 페이지로 넘어가는 이벤트를 줄 수 있다.
action : form 데이터를 처리할 프로그램의 URI(Uniform Resource Identifier)를 지정한다. 웹 문서 링크를 문자열 형태로 작성한 뒤 form의 데이터를 전송하면 해당 루트로 이동한다. php나 jsp로 작성한 문서를 지정해 데이터를 처리하는 것도 가능하다.
onsubmit() : 양식 제출 이벤트가 발생할 때의 동작을 지정할 수 있다. form 태그 내부에서 type="submit"으로 인해 발생하는 이벤트를 처리할 수 있다. 이벤트 발생과 url이 적용되는 시점 사이에 처리할 동작을 지정할 수 있다.
<form action="url"> <input type="submit" onsubmit="formSubmit()" /> </form> <script> function formSubmit() { alert("hello world"); return true; } </script>위와 같이 작성한 뒤 input을 클릭하면 action의 url로 이동하기 전 submit 이벤트 처리가 진행된다.
이때 JS내 함수가 실행되는데 이는 formSubmit()을 반환하는 것이다. 그 뒤 action이 실행된다.
action을 실행시키지 않고 싶다면 return false값을, 아니면 true값을 넣어줘야 한다.
onsubmit()은 return이 true일 때 폼을 전송하기 때문이다!!
onsubmit 이벤트 속성에 들어가는 함수는 반드시 전송해야 할 경우 true를 반환하고, 하지말아야 할 경우 false를 반환하는 형식이어야 한다.
근데 나는 지금 405가 떴고 그 에러를 해결해야 한다.......