폼?
- 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들
- 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
- 이런 작업은 모두 데이터베이스를 기반으로 한다.
- 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그
- 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP같은 서버 프로그래밍 이용을 많이한다.
<form>태그
- 폼을 만드는 기본태그, <form></form> 사이에 여러 폼 요소 삽입
<form>태그의 속성
| 속성 | 설명 |
| method | 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. - get: 데이터를 256~4,096byte까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있습니다. - post: 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다. |
| name | 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다. |
| action | <form>태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다. |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다. |
<fieldset> 태그
- 폼요소를 그룹으로 묶는 태그
<legend>태그
- 그룹으로 묶는 구역에 제목을 붙이는 태그
<body>
<form action="">
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>
</body>
예시로 작성을 해보면 이렇게 뜬다.
<label> 태그
- <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용
<body>
<label for="user-id">
아이디:
</label>
<input type="text" id="user-id"> <!--첫번째 방법-->
<br>
<label>아이디: <input type="text"></label> <!--두번째 방법-->
</body>예시로 만들어 사용해보면 label태그안에 input을 넣어 사용한것이다.
첫번째 방법에는 label바깥쪽에 input을 넣었지만 label 값을 user-id로 지정후, input id값도 user-id로 지정해 둘이 연결시켜주었으며, 두번재 방법에서는 label안에 input자체를 넣어 사용하였다.
<br>은 줄바꿈 태그이다.
결과를 보면
으로 똑같이 나오는것을 볼수 있다.
'FE > HTML,CSS' 카테고리의 다른 글
| HTML - Input태그 (0) | 2023.08.03 |
|---|---|
| HTML 기본문법-2 (0) | 2023.07.29 |
| HTML기본문법-1 (0) | 2023.07.26 |
| 웹 개발 이란? (0) | 2023.07.21 |
