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개의 섹션이 있습니다.:

1. float: float 명령은 레이블이 양식의 왼쪽에 떠 있도록 설정하는 데 사용됩니다.
2. width: 레이블이 얼마나 커야 하는지를 정의합니다. 모든 레이블을 고정 너비로 ​​유지하면 모든 것이 정렬된 선으로 유지됩니다.
3. display: 요소는 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
4. margin-bottom: 이 레이블의 맨 아래에 여백을 추가하여 레이블 사이에 좋은 패딩이 있는 레이블이 다른 레이블 아래에 멋지게 배치되도록 합니다.

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

1. width: 다시 이것은 고정된 너비를 정의하여 모든 것에 멋지게 정의된 통일성을 부여하는 것입니다.
2. Text-align: 텍스트를 오른쪽으로 정렬하면 모든 항목이 왼쪽 정렬된 레이블에서 멀어지게 유지되며 다시 한 번 일치된 상태로 유지됩니다.
3. Padding-right: 오른쪽에 좋은 패딩이 있어 다시 한 번 미세 조정됩니다.

br {
	clear: left;
}

1. clear: 이것은 clear:left가 없으면 가장 중요한 부분입니다. 아무 것도 제대로 정렬되지 않습니다. 이렇게 하면 기본적으로 각 요소 시퀀스 내의 모든 항목이 서로 아래에서 왼쪽으로 정렬됩니다.