반응형
SMALL
1. 폼 태그(form)
- <form> 태그는 웹 페이지에서의 입력 양식을 의미
- 로그인창, 회원가입, 정보기재 등이 해당
- <input>, <label> 등과 같은 필수 양식 요소를 포함하는 컨테이너
| form 태그의 속성 | 설명 |
| method | - 전송방식선택 - 폼을 서버에 전송할 http 메소드를 정함 - GET 방식 : 데이터를 URL에 추가하여 서버에 전달 - POST 방식 : 데이터를 별도로 첨부하여 서버에 전달 https://itsyu.tistory.com/43 |
| name | - 폼을 식별하기 위한 이름 지정 |
| action | - 폼에 전송할 서버 쪽의 script 파일을 지정 - 전송되는 서버 url 또는 html 링크 |
| target | - action에 지정된 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정 |
| autocomplete | - 자동완성 - on으로 작성하면 브라우저에서 사용자가 이전에 입력했던 값들을 토대로 값과 비슷한 값들을 드롭다운 옵션으로 보여줌 |
| enctype | - 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩 되는 방법 |
| novalidate | - 폼 데이터를 서버로 제출할 때 해당 데이터의 유효성을 검사하지 않음을 명시 |
2. 폼을 구성하는 요소
| 태그 | 설명 |
| <form> | - 입력양식 |
| <input> | - 입력 컨트롤 - 입력 할 수 있는 공간 |
| <textarea> | - 다중 라인 입력 컨트롤 - 여러 줄로 된 텍스트 입력 필드 |
| <label> | - 사용자 인터페이스 요소의 설명을 정의 할 때 사용하는 인라인 요소 - for 속성을 사용하여 다른 요소와 결합 가능 * 결합 하고자 하는 요소의 id와 label의 for이 이름이 같아야함 |
| <button> | - 클릭 가능한 버튼을 정의 |
| <option> | - select, optgroup,datslist 요소의 항복을 정의 |
| <select> | - 항목을 선택할 수 있는 드롭다운 메뉴 - 선택됐을 때 값으로써 사용할 value라는 속성을 가짐 |
| <fiedldset> | - 웹 양식의 여러 컨트롤과 label을 묶을 때 사용하는 블록 레벨 요소 - form안에서 form의 요소들을 그룹화 할 때 사용 |
| <legend> | - fieldset 하위에서 그룹화 된 form 요소들의 목적에 맞는 이름 지정 |
| <optgroup> | - select 태그 안의 목록들을 그룹화 할 때 사용 - optgroup 하위에 option 요소들이 포함 |
| <datalist> | - 검색이 가능한(미리보기가 가능) input(사용자 입력) 태그 |
3. 폼 요소 작성 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 형식</title>
</head>
<body>
<form action="/test.html" method="get" autocomplete="on"> <!-- form 속성 사용할 때 -->
<input type="text" name="id"> <!-- 입력창 -->
<select> <!-- 드롭다운 메뉴 -->
<option value="red">red</option> <!-- 드롭다운 메뉴 옵션들 -->
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>
<input type="submit" value="검색"> <!-- 제출 버튼 -->
</form>
</body>
</html>
'코딩(기초 입문) > HTML' 카테고리의 다른 글
| HTML 폼 태그(form) - 3(요소 설명) (0) | 2024.11.13 |
|---|---|
| HTML 폼 태그(form) - 2(요소 설명) (0) | 2024.11.12 |
| 이미지 태그(img)/오디오 태그(audio)/비디오 태그(video) (6) | 2024.11.11 |
| HTML 테이블 태그 (0) | 2024.11.09 |
| HTML 목록 태그 (0) | 2024.11.07 |
