HTML/폼
HTML Forms
+/-HTML 양식은 최종 사용자로부터 데이터를 수집하는 쉬운 방법입니다. 이를 처리하려면 서버 측 스크립팅 언어 또는 JavaScript 와 같은 클라이언트 측 스크립팅 언어(일부 경우 제한된 상호 작용이 단일 페이지 내에서 제공되어야 하는 경우)가 필요합니다 .
- id
폼 또는 컨트롤의 이름입니다.
- action
데이터를 처리할 수 있는 서버측 스크립트의 URL입니다.
- method
정보를 보내는 데 사용되는 방법입니다. POST와 GET의 두 가지 방법이 지원됩니다. POST는 일반적으로 GET을 사용하는 단순 검색을 제외하고 선호되는 방법입니다. 서버 측 언어와 함께 사용하십시오.
- fieldset
양식 컨트롤은 일반적으로 fieldset 요소에 포함됩니다. 복잡한 양식에는 여러 필드 집합이 있을 수 있습니다. 필드 세트는 다른 필드 세트를 포함할 수 있습니다.
- legend
각 필드세트는 범례 요소로 시작합니다. 요소의 내용은 fieldset의 경계에 배치된 제목으로 사용됩니다.
- label for=""
에 대한 레이블은 단일 양식 컨트롤입니다. for 속성 의 값은 동일한 양식에 있는 양식 컨트롤 의 id 속성 과 일치해야 합니다 .
- input type="" name ="" id=""
다양한 유형의 입력 컨트롤. 지원되는 유형은 제출, 텍스트, 비밀번호, 확인란, 라디오, 재설정, 파일, 숨김, 이미지 및 버튼입니다. name 속성 은 양식의 주어진 상자에 입력된 데이터 조각을 식별하기 위해 서버에서 사용합니다. id 속성 은 레이블과 입력을 일치시키는 데 사용됩니다. name 및 id 속성 은 일반적으로 텍스트 입력에 대해 동일한 값을 갖지만 체크박스 및 라디오 입력에 대해 다른 값을 갖습니다.
- select
드롭다운 목록을 위한 SELECT 요소와 여러 줄 텍스트 입력을 위한 TEXTAREA 요소도 있습니다.
이 간단한 예제는
태그를 사용하여 서로 다른 컨트롤 사이에 줄 바꿈을 강제 실행합니다. 실제 양식은 보다 구조화된 마크업을 사용하여 컨트롤을 깔끔하게 배치합니다.
The HTML
+/-이 양식의 HTML은 놀라울 정도로 간단하며 왼쪽과 오른쪽으로 모두 정렬된 수백 개의 div를 만들 필요가 없습니다. 이것은 다양한 브라우저가 여전히 CSS 코드를 다르게 해석하기 때문에 많은 좌절과 많은 디버깅을 야기할 것입니다.
<form>
<label for="name">Name</label>
<input id="name" name="name"><br />
<label for="address">Address</label>
<input id="address" name="address">
</form>
The CSS
+/-이 코드의 CSS는 조금 더 흥미롭습니다.
label,input {
float: left;
width: 150px;
display: block;
margin-bottom: 10px;
}
label {
width: 75px;
text-align: right;
padding-right: 20px;
}
br {
clear: left;
}
코드를 설명하자면
label,input {
float: left;
width: 150px;
display: block;
margin-bottom: 10px;
}
레이블의 CSS에는 4개의 섹션이 있습니다.:
- float: float 명령은 레이블이 양식의 왼쪽에 떠 있도록 설정하는 데 사용됩니다.
- width: 레이블이 얼마나 커야 하는지를 정의합니다. 모든 레이블을 고정 너비로 유지하면 모든 것이 정렬된 선으로 유지됩니다.
- display: 요소는 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
- margin-bottom: 이 레이블의 맨 아래에 여백을 추가하여 레이블 사이에 좋은 패딩이 있는 레이블이 다른 레이블 아래에 멋지게 배치되도록 합니다.
label {
width: 75px;
text-align: right;
padding-right: 20px;
}
- width: 다시 이것은 고정된 너비를 정의하여 모든 것에 멋지게 정의된 통일성을 부여하는 것입니다.
- Text-align: 텍스트를 오른쪽으로 정렬하면 모든 항목이 왼쪽 정렬된 레이블에서 멀어지게 유지되며 다시 한 번 일치된 상태로 유지됩니다.
- Padding-right: 오른쪽에 좋은 패딩이 있어 다시 한 번 미세 조정됩니다.
br {
clear: left;
}
- clear: 이것은 clear:left가 없으면 가장 중요한 부분입니다. 아무 것도 제대로 정렬되지 않습니다. 이렇게 하면 기본적으로 각 요소 시퀀스 내의 모든 항목이 서로 아래에서 왼쪽으로 정렬됩니다.