서식과 관련된 요소를 종합적으로 정리!

HTML 원본 양식 및 양식 컨트롤

양식 요소

요소는 시각적 부분을 생성하지 않습니다. ID, 클래스, 스타일 등 핵심 콘텐츠를 고정할 수 있고, onclick 등 이벤트 속성도 지정할 수 있습니다.

이 밖에도 액션(독립형 테이블에서 버튼이 확인되면 폼이 점프하는 주소 지정), 메서드(폼 제출 시 어떤 유형의 요청을 보낼지 지정, 값을 가져올 수 있음)도 포함되어 있습니다. 또는 post), enctype(표현식 내용을 인코딩하는 데 사용되는 문자 집합 지정), name(양식의 고유 이름 지정), target(대상 URL을 여는 데 적용할 수 있는 방법 지정). [추천: HTML 비디오 튜토리얼]

input 요소

양식 제어 요소 중 가장 다양한 요소는 다음과 같습니다.

비밀번호 입력 상자 :

<input id="password" name="password" style="password" />

숨겨진 필드:

<input id="hidden" name="hidden" style="hidden" />

라디오 버튼

<input id="radio" name="radio" style="radio" />

체크박스

<input id="checkbox" name="checkbox" style="checkbox" />

이미지 필드

<input id="image" name="image" style="image" />

파일 업로드 필드

<input id="file" name="file" style="file" />

제출 버튼

<input id="submit" name="submit" style="submit" />

재설정 버튼

<input id="reset" name="reset" style="reset	" />

작업 없음 버튼

<input id="button" name="buton" style="button" />

일부 포커스 속성 of

checked: 라디오 버튼과 체크박스가 처음에 선택되었는지 여부를 설정합니다.
disabled: 첫 번째 로드를 설정할 때 이 요소를 사용하세요.
maxlength: 이 속성은 텍스트 상자에 입력할 수 있는 최대 수를 지정하는 숫자입니다.
readonly: 지정된 텍스트 상자의 값은 사용자가 수정할 수 없습니다(js 스크립트를 사용하여 수정 가능). 이 속성은 boolean 값을 지원하는 속성으로, 이 요소의 값이 읽기 전용임을 나타냅니다.
size: 이 속성의 값은 칼슘 요소의 너비를 지정하는 숫자입니다.
src: 이미지 필드에 표시되는 이미지의 URL을 지정합니다.
width: 이미지 필드에 표시되는 이미지의 너비를 지정합니다.
heigeht: 이미지 필드에 표시되는 이미지의 높이를 지정합니다.

label 요소

label 요소는 id, class, style 등과 같은 핵심 속성을 지정할 수 있으며, onclick과 같은 이벤트 속성도 지정할 수 있습니다. 또한 레이블이 연결된 양식 컨트롤을 지정하는 for 속성을 지정할 수도 있습니다. 사용법은 for=""이며, 따옴표 안에는 관련 컨트롤의 ID가 표시됩니다.

버튼 요소

요소는 버튼을 정의하는 데 사용됩니다. ID, 클래스, 스타일 등과 같은 핵심 친숙도를 지정할 수 있으며 onclick과 같은 이벤트 속성도 정의할 수 있습니다. 또한 다음 요소를 지정할 수도 있습니다.

disabled: 이 버튼을 비활성화할지 여부를 지정합니다.
name: 버튼의 고유한 이름을 지정하세요. 속성 이름은 ID와 일치해야 합니다.
type: 이 버튼이 속한 버튼 유형을 지정합니다. 속성 값은 버튼, 재설정 또는 제출 중 하나일 수 있습니다.
value: 버튼의 초기 값을 지정합니다. js 스크립트를 통해 변경할 수 있습니다.

select 및 option 요소

요소는 목록 상자 또는 드롭다운 메뉴를 만드는 데 사용됩니다. 칼슘 요소는 /> 요소 목록 또는 메뉴 항목을 나타냅니다.
요소는 ID, 클래스, 스타일 등과 같은 핵심 속성을 지정할 수 있습니다. 이 요소는 onchange 이벤트 속성을 지정할 수 있습니다. 목록 상자 또는 드롭다운 목록 항목에서 선택한 옵션이 변경되면 onchange 이벤트가 트리거됩니다.

또한 요소는 다음 속성을 지정할 수도 있습니다.

disabled: 목록 상자와 드롭다운 메뉴를 비활성화하도록 설정합니다. 이 속성의 값은 비활성화만 가능하거나 속성 값이 생략될 수 있습니다.
multiple: 목록 상자와 드롭다운 메뉴에서 다중 선택을 허용할지 여부를 설정합니다. 다중 선택을 허용하도록 설정되면 요소가 자동으로 목록 상자를 생성합니다.
size: 목록 상자와 드롭다운 메뉴가 동시에 구현할 수 있는 목록 항목 수를 지정합니다. 다중 선택을 허용하도록 설정되면 요소가 자동으로 목록 상자를 생성합니다.

요소에는 다음 두 개의 하위 요소만 포함될 수 있습니다.

: 목록 항목이나 메뉴 항목을 정의하는 데 사용됩니다. 이 요소는 이 옵션의 텍스트로 텍스트 콘텐츠만 포함할 수 있습니다.
: 목록 항목 또는 메뉴 라인 그룹을 정의하는 데 사용됩니다. 이 요소는 하위 요소만 포함할 수 있습니다.

요소는 id, class, style 등과 같은 핵심 요소를 지정할 수 있으며 onclick과 같은 이벤트 속성도 지정할 수 있습니다.

또한 다음 요소를 정의할 수도 있습니다.

disabled: 이 옵션을 비활성화하도록 지정합니다. 이 속성의 값은 비활성화만 가능합니다.
selected: 플로우 박스의 초기 상태가 선택되었는지 여부를 지정합니다. 이 속성의 값은 선택만 가능합니다.
value: 이 옵션에 해당하는 요청 매개변수 값을 지정합니다.

요소는 ID, 클래스, 스타일 등과 같은 핵심 속성을 지정할 수 있습니다. 또한 onclick과 같은 이벤트 응답 속성을 지정할 수도 있습니다. 그 밖에도 다음과 같은 속성이 있습니다.

label: 이 옵션 그룹의 레이블을 지정합니다. 이 속성은 필수입니다.
disabled: 이 옵션 그룹의 모든 옵션을 비활성화하도록 설정합니다. 속성 값은 비활성화하거나 생략할 수만 있습니다.

HTML5 향상된 텍스트 영역

요소는 여러 줄의 텍스트 영역을 생성하는 데 사용됩니다. id, class, style 등과 같은 핵심 요소를 지정할 수 있으며, onclick과 같은 이벤트 속성도 지정할 수 있습니다. 텍스트 영역의 특수한 특성으로 인해 사용자 입력을 받을 수 있으며 사용자는 텍스트 영역에서 텍스트를 선택할 수 있습니다. 따라서 텍스트 영역이 선택되는 시점과 실행 시점에 적용되는 onselect 및 onchange 속성을 지정할 수도 있습니다. 텍스트가 수정됩니다. 이 외에도 이 요소는 다음 요소를 지정할 수도 있습니다.

cols: 텍스트 필드의 너비를 지정합니다(필수).
rows: 필수 텍스트 높이를 지정합니다.
disabled: 이 텍스트 필드가 비활성화되도록 지정합니다. 속성 값은 비활성화만 가능합니다.
readonly: 지정된 텍스트 필드는 읽기 전용입니다. 이 속성의 값은 읽기 전용일 수 있습니다.
maxlength: 이 여러 줄 텍스트 필드에 입력할 수 있는 최대 문자 수를 설정합니다.
wrap: 여러 줄로 구성된 텍스트 필드에 줄 바꿈을 추가할지 여부를 지정합니다. 이 속성은 소프트와 하드라는 두 가지 속성 값을 지원합니다. 속성 값이 hard로 설정된 경우 cols 속성을 지정해야 합니다. 입력 문자가 cols에 지정된 너비를 초과하여 텍스트가 줄 바꿈되면 여러 줄 텍스트 필드가 자동으로 줄 바꿈에 줄 바꿈을 추가합니다. 양식이 제출되면.

fieldset 및 legend 요소

요소는 양식 내의 양식 요소를 그룹화하는 데 사용할 수 있습니다. , 이 요소는 id, class, style 등과 같은 핵심 요소를 지정할 수 있으며 다음 세 가지 속성도 지정할 수 있습니다.

name: 요소의 이름을 지정합니다.
form: 이 속성의 속성 값은 요소가 양식에 속함을 지정하는 데 사용되는 유효한 요소가 있는 ID여야 합니다.
disabled: 이 속성은 양식 요소를 비활성화하는 데 사용됩니다. 이 속성은 불리언 값을 지원하는 속성입니다.

HTML의 새로운 양식 속성

양식의 양식 속성

html5에는 모든 양식 컨트롤에 양식 속성이 추가되어 페이지에서 양식 컨트롤을 정의할 때 더 유연해지고 페이지 레이아웃이 제공하는 양식 컨트롤을 마음대로 방지하고 배열할 수 있습니다. 더 큰 유연성.

Formaction 속성

HTML5은 동일한 양식에 등록 및 로그인 버튼이 모두 포함되어 있는 문제를 처리합니다. 이 속성은 양식이 다른 URL에 제출되도록 동적으로 허용할 수 있습니다.

formxxxx attribute

formxxxx 속성은 formaction 속성과 유사합니다. sumit, Reset 및 image의 경우 formenctype, formmethod, formtarget 및 기타 속성을 지정할 수 있습니다.

formenctype: 이 속성을 사용하면 버튼이 다음을 수행할 수 있습니다. 동적으로 enctype 속성이 됩니다.
formmethod: 이 속성을 사용하면 버튼이 메서드 속성으로 동적으로 변경될 수 있습니다.
formtarget: 이 속성을 사용하면 버튼이 대상 속성으로 동적으로 변경될 수 있습니다.

autofocus 속성

매우 일반적으로 사용되는 속성으로, 웹 페이지를 열 때 해당 위치에 자동으로 초점을 맞추는 기능입니다. 사용법은 다음과 같이 해당 코드에 추가하는 것입니다: <input type="password" name="name" autofocus />이 코드의 자동 초점 기능은 자동으로 초점을 맞추는 것입니다. 웹 페이지를 열 때 페이지 비밀번호 상자. <input type="password" name="name" autofocus />该代码中autofocus的作用就是在打开网页时自动聚焦到该密码框。

placeholder属性

这个属性也非常的常用，作用就是在用户为输入数据的文本框中给出对应的提示，如：<input type="text" name="username" palceholder="请输入用户名" />；