폼 구성하기
폼(form)은 HTML에서 사용자가 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다.
- form 태그
- input 태그
- label 태그
- fieldset와 legend 태그
- textarea 태그
- select, option, optgroup 태그
- button 태그
- 폼 관련 태그에서 사용할 수 있는 추가 속성
1. form 태그
- form 태그는 폼 양식을 의미하는 태그이다.
- HTML의 폼을 구성하는 태그는 모두 form 안에 작성한다.
- action과 method 속성을 함께 사용
[형식]
<form action="서버 url" method="get 또는 post"></form>
<form action="http://처리할페이지주소">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
[ form속성 ]
action : 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적는다.
method : 입력받은 값을 서버에 전송할 때 송신 방식을 적는다. 속성 값으로는 get 또는 post 사용
[method 속성값]
form 태그를 사용할 때 action과 method 속성에 어떤 값을 사용해야 하는지 헷갈리는 경우가 많다. 일반적으로 폼 요소의 전송은 서버에서 처리하므로 서버 영역을 담당하는 개발자가 작성한다. 이 책에서 배우는 내용은 서버 영역이 아니다. 따라서 action 속성값은 "#"으로 적고, method 속성값은 보안이 요구되는 정보라면 "post", 아니라면 "get"으로 적으면 된다.
GET 방식 (기본)
- URL로 전송
- 주소에 데이터를 저장하여 전송하는 방식
- 데이터가 주소(url) 입력창에 그대로 나타난다.
- 전송할 수 있는 데이터의 크기 또한 제한적이다.
- 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용
POST 방식 ☑️ (항상 POST 방식으로 지정하는 것이 좋다.)
- URL이 아닌 방식으로 전송
- 데이터가 외부에 드러나지 않으며, 개인 아이디나, 비밀번호가 url에 보이지 않고 숨겨서 보내기 위한 방식
- 데이터를 별도로 첨부하여 전달하는 방식
- 전송할 수 있는 데이터의 크기 또한 제한이 없다.
- 보안성 및 활용성이 GET 방식 보다 좋다.
2. input 태그
- 로그인 페이지의 아이디와 비밀번호처럼 입력 받는 요소를 생성할 때 사용
- type 속성 필수, name과 value 속성은 선택
- 인라인 요소
[형식]
<input type="종류" name="이름" value="초깃값">
type 속성
type 속성은 입력된 값에 따라 상호작용 요소의 종류를 결정한다.
| 속성값 | 설명 |
| text (기본값) | 한 줄 텍스트를 입력할 수 있는 요소를 생성 |
| password | 비밀번호 입력 (값이 가려진 한 줄 텍스트) |
| tel | 전화번호 입력 (숫자 키패드 사용) |
| number | 숫자 입력 |
| url | URL 주소 입력 |
| search | 검색용 텍스트 입력 |
| 이메일 입력 | |
| checkbox | 체크 박스 (복수 선택 가능, 반드시 name 지정 필수) |
| radio | 라디오 버튼 ◯ (복수 선택 불가능, 반드시 name 지정 필수) |
| file | 파일 업로드 |
| button | 버튼 (기본 동작이 없는 푸시 버튼) |
| image | 이미지 업로드 버튼, img 태그처럼 src 속성을 사용해야 한다. |
| hidden | 사용자에겐 보이지 않지만, 관리자가 알아야하는 숨겨진 입력 필드 (값만 서버로 전송) |
| date | 날짜(연, 월, 일) 선택 (달력 열어줌) |
| datetime-local | 사용자 시간대에 맞는 날짜(연, 월, 일, 시, 분) |
| month | 날짜(연, 월) |
| week | 날짜(연, 주차) |
| time | 시간 입력 (시간대 없이) |
| range | 숫자 범위 선택할 수 있는 슬라이스 |
| color | 색상 선택 |
| submit | 폼 전송 역할을 하는 버튼 |
| reset | 사용자가 입력한 값 초기화하는 버튼 (권장하지 않음) |
name 속성
name 속성에는 입력 요소의 이름을 작성한다. 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정된다. 서버에는 지정된 이름으로 입력 요소를 식별할 수 있다.
value 속성
value 속성에는 입력 요소의 초깃값을 작성한다. 입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초깃값을 설정해야 하는 경우도 있다. 이럴 때 사용하는 속성이다.
3. label 태그
label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용한다. label 태그를 잘 사용하면 label 태그만 클릭해도 상호작용 요소를 선택할 수 있다. 그리고 시각 장애인이 웹을 탐색할 때 사용하는 보조 도구인 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별할 수 있어서 웹 접근성 향상을 위해서도 필수로 사용하길 권장한다.
사용하는 방법에 따라 암묵적인 방법과 명시적인 방법으로 구분
암묵적인 방법 : label 태그에 상호작용 요소를 포함하는 방법
명시적인 방법 : label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 방법
함께 사용할 수도 있다.
//암묵적인 방법
<label>
아이디
<input type="text"> -> 상호작용 요소
</label>
//명시적인 방법
<label for="userpw">비밀번호</label>
<input type="password" id="userpw"> -> for 속성값과 id 속성값 같아야 함
//함께 사용
<label for="username">
<input type="text" id="username">이름
</label>
for 속성을 통해 특정 input 필드의 id값과 연결시킨다.
4. fieldset와 legend 태그
fieldset 태그로 그룹을 지으면 그룹별로 박스 모야의 테두리가 생긴다. 이렇게 그룹 지은 요소들은 legend 태그로 이름을 붙인다.
5. textarea 태그
여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용한다. 웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성한다.
[형식]
<textarea>초깃값</textarea>
input 태그와 다르게 닫는 태그가 있다. textarea 태그로 생성한 여러 줄의 입력 요소는 콘텐츠 영역에 초깃값을 정의한다.
<p>textarea:
<textarea cols="50" rows="5">당신의 행복한 순간을 입력해 주세요.</textarea>
</p>
6. select, option, optgroup 태그
- 콤보박스 생성 가능
- 콤보박스에 항목 하나를 추가할 때는 option 태그 사용
- 항목들을 그룹으로 묶고 싶다면 optgroup 태그 사용
- option 태그는 서버에 전송할 값을 value 속성으로 지정할 수 있는데, 속성을 생략하면 option 태그의 콘텐츠로 적은 텍스트가 값으로 전송된다. optgroup 태그로 항목들을 그룹 지을 때 반드시 label 속성으로 그룹명을 지정해야 한다.
[속성]
size:
size 속성은 콤보박스에서 화면애 노출되는 항목 개수를 지정하는 속성이다.
속성값으로 숫자를 적으면 되고, 생략할 경우 기본으로 1개 항목이 표시된다.
multiple:
이 속성을 사용하면 여러 항목을 동시에 선택할 수 있다. 항목 하나를 선택한 상태에서 ctrl(cmd)을 누르고 다른 항목을 클릭하면 된다. 하지만 사용자는 이를 잘 모르기 때문에 checkbox를 사용하는 것이 좋다.
selected:
콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데, selected 속성을 사용하면 기본 선택 항목을 변경할 수 있다.
<select name="moveie">
<optgroup label="판타지">
<option value="Rings">반지의 제왕</option>
<option value="hobbit">호빗</option>
<option value="Harrypotter">해리포터</option>
</optgroup>
<optgroup label="드라마">
<option value="EternalSunshine" selected>이터널 선샤인</option>
<option value="Intern">인턴</option>
<option value="once">원스</option>
</optgroup>
</select>
7. button 태그
input 태그에서 type 속성값을 submit, reset, button으로 지정해서 생성할 수 있다. 또한 별도의 button 태그로 생성할 수도 있다. button 태그도 type 속성을 가진다.
[형식]
<button type="종류">버튼 내용</button>
submit: 폼을 서버에 전송할 목적
reset: 내용을 초기화할 버튼일 때
button: 단순한 버튼일 때
🌐 input 태그로 생성한 버튼과 button 태그로 생성한 버튼은 뭐가 다른가?
button 태그는 input 태그로 생성할 수 있는 버튼 요소의 역할을 대신하기 위해 만들어진 태그로, input 태그보다 나중에 등장했다. button 태그도 input 태그로 생성하는 버튼 요소처럼 type 속성이 있어서 최신 HTML에서는 버튼 요소를 생성할 때 더 이상 input 태그를 사용할 필요가 없다. button 태그는 시작 태그와 닫는 태그가 있어서 콘텐츠를 작성할 수 있다. 또한, 단순한 텍스트 외에도 이미지, 태그 같은 것들을 포함할 수 있어서 버튼 요소를 꾸미기가 더 수월하다는 장점이 있다.
8. 폼 관련 태그에서 사용할 수 있는 추가 속성
disabled :
- 상호작용 요소를 비활성화하며, input, textarea, select, button 태그에서 사용 가능하다.
- 비활성화되면 입력 텍스트를 입력할 수 없고, 목록 상자는 항목을 선택할 수 없으며, 버튼 요소는 버튼을 클릭할 수 없다.
readonly :
- 상호작용 요소를 읽기 전용으로 변경한다.
- 읽기 전용으로 변경되면 입력 요소에 텍스트를 입력할 수 없지만, 요소를 서택하거나 드래그 해서 내용을 복사할 순 있다.
- textarea 태그와 input 태그에서 사용할 수 있다.
checked :
- 요소를 선택된 상태로 표시한다.
- 선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용 가능
placeholder :
- 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도
- 사용자가 올바른 입력값을 넣도록 유도
autofocus:
input에 자동으로 커서가 포커스
required :
input 중 반드시 입력할 곳을 지정 (비어 있으면 전송 불가)
maxlength : 최대 입력 문자 수
<-> minlength: 최소 입력 문자 수
- 입력할 수 있는 글자 수를 제한한다.
- 속성값으로는 숫자를 입력
max : input 요소에 허용하는 값의 최대값을 지정
min : input 요소에 허용하는 값의 최소값을 지정
radio 버튼과 checkbox
<p>
<input type="radio" name="movie" value="Rings" checked> 반지의 제왕 <br>
<input type="radio" name="movie" value="Harrypotter"> 해리포터 <br>
<input type="radio" name="movie" value="EternalSunshine"> 이터널선샤인 <br>
<input type="radio" name="movie" value="once"> 원스
<p>
<p>
<input type="checkbox" name="movie2" value="Rings2" checked> 반지의 제왕 <br>
<input type="checkbox" name="movie2" value="Harrypotter2" disabled> 해리포터 <br>
<input type="checkbox" name="movie2" value="EternalSunshine2"> 이터널선샤인 <br>
<input type="checkbox" name="movie2" value="once2"> 원스
<p>
'기술 > HTML' 카테고리의 다른 글
| [HTML] 테이블 (0) | 2022.10.08 |
|---|---|
| [HTML] 목록 태그 (0) | 2022.10.07 |
| [HTML] 하이퍼링크, 이미지 (0) | 2022.10.07 |
| [HTML] 멀티미디어 (0) | 2022.09.28 |
| [HTML] 텍스트 태그 (0) | 2022.09.27 |