폼(form)이란 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미
-> 상호 작용 요소 : 아이디 비밀번호 입력 요소, 로그인 상태 유지 설정하는 체크 박스, 버튼 요소
form 태그
폼 양식을 의미하는 태그, HTML 폼을 구성하는 태그는 모두 form 태그 안에 작성
<form action = "server url" method = "get or post"></form>action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적음
method 속성에는 입력받은 값을 서버에 전송할 때 송신 방식을 적음
input 태그
로그인 페이지의 아이디와 비밀번호 처럼 입력받는 요소를 생성할 때는 input 태그를 사용
type 속성은 필수, name & value 속성은 선택해서 사용
<input type = "종류" name = "이름" value = "초깃값">type 속성
type 속성은 입력된 값에 따라 상호작용 요소의 종류 결정
-> 입력 요소에는 아이디 비밀번호 외에도 콤보박스, 파일 업로드, 체크 박스, 라디오 버튼 등 다양
| 속성값 | 설명 |
|---|---|
| text | 한 줄로 텍스트를 입력할 수 있는 요소 생성 |
| password | 비밀번호를 입력할 수 있는 요소 생성 |
| tel | 전화번호 형식을 입력할 수 있는 요소 생성 |
| number | 숫자만 입력할 수 있는 요소 생성 |
| url | url 주소 형식을 입력할 수 있는 요소 생성 |
| search | 검색용 텍스트를 입력할 수 있는 요소 생성 |
| 이메일 형식을 입력할 수 있는 요소 생성 | |
| checkbox | 체크박스 요소 생성 |
| radio | 라디오버튼 요소 생성 |
| file | 파일 업로드 요소 생성 |
| button | 버튼 요소 생성 |
| image | 이미지로 버튼 요소 생성, img 태그처럼 src 태그 사용, alt 사용 X |
| hidden | 사용자 눈에 보이지 않는 입력 요소 생성 |
| date | 날짜(연,월,일)를 선택할 수 있는 입력 요소 생성 |
| datetime-local | 사용자 시간대에 맞는 날짜를 선택할 수 있는 입력 요소 생성 |
| month | 연,월을 선택할 수 있는 입력 요소 생성 |
| week | 연,주차를 선택할 수 있는 입력 요소 생성 |
| time | 시간을 선택할 수 있는 입력 요소 생성 |
| range | 숫자 범위를 선택할 수 있는 슬라이드 요소 생성 |
| color | 색상을 선택할 수 있는 요소 생성 |
| submit | 폼 전송 역할을 하는 버튼 요소 생성 |
| reset | 폼 요소에 사용자가 입력한 값을 초기화하는 버튼 요소 생성 |
name 속성에는 입력 요소의 이름 작성
-> 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정됨
value 속성에는 입력 요소의 초기값을 작성
label 태그
form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용
<form action = # method = "get">
<!-- label 태그 암묵적 사용 방식-->
<label>
아이디
<input type = "text">
</label>
<br>
<!-- label 태그 명시적 사용 방식-->
<label for = "userpw"> 비밀번호</label>
<input type = "password" id="userpw">
<br>
<!-- 암묵, 명시 혼용 사용-->
<label for = "username">
이름 <input type = "text", id=""username">
</label>
</form>암묵적 방식은 label 태그에 상호작용 요소를 포함 시킴
명시적인 방법은 label 태그의 for 속성과 상호 작용 요소의 id 속성을 같은 값으로 설정하는 방법
fieldset과 legend 태그
form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용해 그룹지을 수 있음
-> 그룹 지으면 그룹별로 박스 모양의 테두리 생김
-> legend로 이름 붙일 수 있음
<form action = "#">
<fieldset>
<legend> 그룹 이름 </legend>
<!-- 상호 작용 요소 -->
</fieldset>
</form>ex)
<form action = # method = "get">
<fieldset>
<legend>기본 정보</legend>
<p>
<label for = "userid">아이디</label>
<input type = "text" id = "userid">
</p>
<p>
<label for = "passwd">비밀번호</label>
<input type = "password" id="passwd">
</p>
</fieldset>
<fieldset>
<legend>선택 정보</legend>
<p>
<label for = "age">나이</label>
<input type = "number" id = "age">
</p>
<p>
<label for = "recommender">추천인</label>
<input type = "text" id=""recommender">
</p>
</fieldset>
</form>
textarea 태그
여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그 사용
<textarea> 초기값 </textarea>input 태그와 다르게 닫는 태그 존재
input 태그의 초기값은 value 속성에서 정의하지만, textarea 의 경우 콘텐츠 영역에 초기값 정의
ex)
<form action = # method = "post">
<fieldset>
<legend>블로그 글쓰기</legend>
<p>
<label for = "title"> 제목
<input type = "text" id="title" name="title">
</label>
</p>
<p>
<label for="desc">내용
<textarea id = "desc" name="desc"></textarea>
</label>
</p>
</fieldset>
</form>
select,option,optgroup(콤보박스) 태그
select 태그를 사용하면 콤보박스 생성 가능
-> 콤보 박스에 항목 하나를 추가할때는 option 태그 사용
-> 항목들을 그룹으로 묶고 싶다면 optgroup 태그 사용
<select>
<optgroup label = "그룹이름">
<option value = "서버의 전송할 값"> 웹 브라우저에 표시할 값 </option>
</optgroup>
</select> <form action = # method = "post">
<fieldset>
<legend>개인정보 입력</legend>
<p>
<label for = "title"> 지역 <br>
<select name = "city" id="city">
<optgroup label = "서울시">
<option value="강북구">강북구</option>
<option value="강남구">강남구</option>
<option value="서초구">서초구</option>
</optgroup>
<optgroup label = "경기도 성남시">
<option value="중원구">중원구</option>
<option value="분당구">분당구</option>
</optgroup>
</select>
</label>
</p>
</fieldset>
</form>
size 속성
콤보박스에서 화면에 노출되는 항목 개수를 지정하는 속성
<select name = "city" id="city" size = "3">
mutliple 속성
select 태그로 생성하는 콤보박스는 기본적으로 1개만 선택가능
-> multiple 속성 사용 시 여러 항목을 동시에 선택 가능
-> cmd 누른 후 다른 항목 선택하면 됨
<select name = "city" id="city" multiple>
selected 속성
콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태에서 표시됨
-> selected 속성을 통해 기본 선택 사항 변경 가능
<select name = "city" id="city">
<optgroup label = "서울시">
<option value="강북구">강북구</option>
<option value="강남구">강남구</option>
<option value="서초구" selected>서초구</option>
</optgroup>
<optgroup label = "경기도 성남시">
<option value="중원구">중원구</option>
<option value="분당구">분당구</option>
</optgroup>
</select>
Button 태그
input 태그에서도 type 속성값을 submit,reset,button으로 지정해 생성 가능
-> 별도의 button 태그로도 생성 가능
<button type = "종류"> 버튼 내용 </button>type 속성값은 폼을 서버에 전송할 목적이면 submit, 상호 작용 요소에 입력된 내용을 초기화하는 버튼이면 reset, 단순한 버튼이면 button으로 지정
<button type="submit">
<img src = "google.png" alt = "google button">
구글 홈페이지 접속하기
</button>
input태그로 생성한 버튼 요소처럼 type 속성 존재
-> 시작 태그와 종료 태그가 있어 콘텐츠를 작성할 수 있음, 꾸미기도 수월
폼 관련 태그에서 사용할 수 있는 추가 속성
disabled 속성
상호작용 요소를 비활성화
-> input, textarea, select, button 태그에서 사용 가능
ex)
<input type="text" disabled>
<button type = "button" disabled> 비활성</button>
readonly 속성
readonly 속성은 상호작용 요소를 읽기 전용으로 변경
-> 입력 요소에 텍스트는 입력 불가능, 요소를 선택하거나 드래그해서 내용 복사는 가능
-> input 타입의 속성값이 text,search,url,tel,email,password,date,month,week,time,datetime-local,number 일때만 가능
<태그 readonly><input type = "password" readonly><br>
<textarea readonly>읽기 전용입니다</textarea>
텍스트를 입력할 수는 없지만, 마우스로 요소 클릭은 가능
disabled, readonly 둘다 상호작용 요소를 사용하지 못하게 한다는 점에서 비슷하지만
->disabled 속성은 form 태그로 서버에 값을 전송할때 값이 아예 전송되지 않지만, read only는 값이 전송됨
maxlength 속성
입력할 수 있는 글자 수 제한
<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>
checked 속성
요소를 선택된 상태로 표시
-> 선택요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용할 수 있음
<fieldset>
<legend>좋아하는 과일</legend>
<input type="checkbox" id="banana" name="banana" value="banana">
<label for="banana">banana</label><br>
<input type="checkbox" id="apple" name="apple" value="apple">
<label for="apple">apple</label><br>
<input type = "checkbox" id="orange" name="orange" value="orange" checked>
<label for ="orange">orange</label><br>
</fieldset>
placeholder 속성
입력 오소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도
<input placeholder="입력값에 대한 힌트">ex)
<input type="tel" placeholder="전화번호를 입력해 주세요!">
