아이디 비번, 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다.
텍스트박스나 버튼같은 폼 형태는 HTML태그로 만들지만 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용해 처리한다.
일단은 태그만 살펴보자.
form 태그
태그 사이에 여러가지 폼 요소를 넣는다. 기본형은 다음과 같다
<form [속성="속성값"]> 여러 폼 요소</form>form 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 어떤 프로그램을 이용해 처리할 것인지를 지정한다.
| 종류 | 설명 |
| method | 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. get : 데이터를 256~4,096byte까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있습니다. post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다 |
| name | 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다 |
| action | <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다. |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다. |
| autocomplete | 자동완성기능을 사용할 지를 설정할 수 있는 속성입니다. 기본 속성값은 "on"입니다. |
예를 들어 폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다면 다음과 같이 작성한다
<form action="register.php">
/* 여러 폼 요소 */
</form>폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그
하나의 폼 안에서 여러 구역을 나누어 사용할 때 fieldset태그를 사용합니다.
legend태그는 fieldset태그로 묶은 그룹에 제목을 붙일 수 있다
예시를 보자. 상품 주문 양식을 만들 때 이 두 태그를 사용해서 상품선택과 배송정보를 그룹으로 묶은 것이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<form action="">
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>
</body>
</html>
폼 요소에 레이블을 붙이는 <label> 태그
이 태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.
레이블이란 입력란 가까이에 "아이디"나 "비밀번호"처럼 붙여놓은 텍스트를 말한다.
label태그를 활용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.
label 태그 사용법-1
기본형은 다음과 같다
<label>레이블명<input></label>
이렇게 폼 요소를 레이블 태그로 감싸고 레이블 텍스트를 적어준다
label 태그 사용법-2
두 번째 방법은 label태그와 폼 요소를 따로 사용하고, label 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로를 연결하는 것이다. 기본형은 다음과 같다
<label for="id명">레이블명</label>
/* . . . */
<input id="id명">이렇듯 레이블과 폼 요소가 떨어져 있을 때에도 연결할 수 있다는 점이 이 방식의 장점이다.
예제코드는 다음과 같다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<!-- 방법1 -->
<label>아이디(6자 이상) <input type="text"></label>
<br>
<!-- 방법2 -->
<label for="passward">비밀번호(8자 이상)</label>
<input type="text" id="passward">
</body>
</html>
'📁Web Developing > HTML 기초' 카테고리의 다른 글
| input 태그-2 (버튼) (0) | 2022.05.30 |
|---|---|
| input 태그-1 (텍스트 입력) (0) | 2022.05.30 |
| 하이퍼링크 삽입하기 (0) | 2022.05.29 |
| 멀티미디어 컨텐츠 삽입하기 (0) | 2022.05.29 |
| 이미지 삽입하기 (0) | 2022.05.28 |
댓글