HTML 양식(form)은 사용자가 데이터를 입력하고 처리를 위해 서버에 제출할 수 있는 웹 페이지의 섹션입니다. HTML 태그 및 속성을 사용하여 생성되며 텍스트, 숫자, 날짜와 같은 다양한 유형의 정보를 수집하는 데 사용할 수 있습니다. , 및 파일.
HTML 양식은 입력 필드, 레이블, 버튼 및 드롭다운 메뉴와 같은 여러 요소로 구성됩니다. 각 요소에는 동작과 모양을 정의하는 자체 속성이 있습니다. 예를 들어 입력 요소에는 입력 유형, 입력 필드 이름, 필드에 표시되는 기본 텍스트 및 사용자가 입력한 값을 결정하는 유형, 이름, 자리 표시자 및 값과 같은 특성이 있을 수 있습니다.
사용자가 양식을 제출하면 양식 태그에 지정된 방법을 사용하여 데이터가 서버로 전송됩니다. 가장 일반적인 두 가지 방법은 GET과 POST입니다. GET 메소드는 URL의 일부로 데이터를 전송하고 POST 메소드는 HTTP 요청 본문의 데이터를 전송합니다.
HTML 양식은 사용자 등록, 로그인, 문의 양식, 설문 조사 및 전자 상거래 결제와 같은 다양한 목적으로 웹 개발에서 널리 사용됩니다. 사용자가 웹사이트와 상호 작용하고 개발자가 사용자 데이터를 수집하고 처리할 수 있는 편리한 방법을 제공합니다.
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<form>
<label for=""name"">Name:</label>
<input type=""text"" id=""name"" name=""name""><br><br>
<label for=""email"">Email:</label>
<input type=""email"" id=""email"" name=""email""><br><br>
<label for=""password"">Password:</label>
<input type=""password"" id=""password"" name=""password""><br><br>
<label for=""gender"">Gender:</label>
<input type=""radio"" id=""male"" name=""gender"" value=""male"">
<label for=""male"">Male</label>
<input type=""radio"" id=""female"" name=""gender"" value=""female"">
<label for=""female"">Female</label><br><br>
<label for=""country"">Country:</label>
<select id=""country"" name=""country"">
<option value=""usa"">USA</option>
<option value=""canada"">Canada</option>
<option value=""mexico"">Mexico</option>
</select><br><br>
<label for=""message"">Message:</label>
<textarea id=""message"" name=""message""></textarea><br><br>
<input type=""submit"" value=""Submit"">
</form>
</body>
</html>폼 양식 예시 코드.
HTML 입력은 사용자가 웹 페이지에 데이터를 입력 할 수 있는 요소입니다. 텍스트 상자, 라디오 버튼, 확인란 및 드롭 다운 목록과 같은 다양한 유형의 양식 컨트롤을 작성하는 데 사용됩니다.
입력 요소에는 동작과 모양을 정의하는 몇 가지 속성이 있습니다. 가장 일반적인 속성은 유형, 이름, 가치 및 자리 표시 자입니다.
유형 속성은 텍스트, 암호, 이메일, 번호, 날짜 및 시간과 같은 입력 제어 유형을 지정합니다. 이름 속성은 양식이 제출될 때 입력 제어를 식별하는 데 사용됩니다. 값 속성은 입력 제어의 초기 값을 설정합니다. 자리 표시 자 속성은 예상 입력의 힌트 또는 예를 제공합니다.
HTML 입력은 사용자가 데이터를 제출하고 웹 사이트와 상호 작용할 수있는 대화식 웹 페이지를 만드는 데 필수적인 요소입니다. 웹 개발에 널리 사용되며 모든 최신 웹 브라우저에서 지원됩니다."
"HTML 레이블은 입력, 선택, TextArea 등과 같은 양식 제어와 레이블을 연결하는 데 사용되는 요소입니다. 양식 제어에 대한 명확하고 간결한 설명을 제공하여 양식의 접근성과 유용성을 향상하는 데 도움이 됩니다.
레이블 요소는 레이블 텍스트를 정의하는 데 사용되며 for 속성은 레이블을 양식 컨트롤과 연결하는 데 사용됩니다. 특성 값은 양식 컨트롤의 ID 속성 값과 일치해야 합니다.
예를 들어, 다음 코드 스니펫은 레이블 요소를 사용하여 레이블을 입력 요소와 연결하는 방법을 보여줍니다.
```
<label for = ""username""> username : </label>
<input type = ""text""id = ""username""name = ""username"">
```
이 예에서 ""username :""라벨은 for attribute 및 id 속성 값을 사용하여 입력 요소와 관련됩니다. 사용자가 레이블을 클릭하면 초점이 자동으로 관련 양식 컨트롤로 설정되어 사용자가 양식과 더 쉽게 상호 작용할 수 있습니다.
접근성 및 유용성을 향상하는 것 외에도 레이블 요소를 사용하면 양식 컨트롤에 대한 설명 텍스트를 제공하여 웹 페이지의 SEO를 개선하는 데 도움이 됩니다.
'구글덕후의 HTML' 카테고리의 다른 글
| div 색상변경 샘플 코드 (0) | 2023.03.18 |
|---|---|
| 선택 안됨 구글덕후의 HTML [6] form양식 샘플 코드 2 (0) | 2023.03.13 |
| 구글덕후의 HTML [4] 심플랜딩페이지 / 구글 사이트 도구 (0) | 2023.03.11 |
| 구글덕후의 HTML [3] 심플랜딩페이지 (0) | 2023.03.07 |
| 구글덕후의 HTML [2] 테이블 (0) | 2023.03.06 |