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

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="请输入用户名" />；

placeholder 속성

이 속성은 사용자가 데이터를 입력하는 텍스트 상자에 다음과 같이 해당 프롬프트를 제공하는 데에도 매우 일반적으로 사용됩니다. <input type="text" name="username" palceholder= "사용자 이름을 입력하십시오" />;이 코드에서 자리 표시자의 기능은 사용자가 텍스트 상자에 데이터를 입력하지 않았을 때 사용자 이름을 입력하십시오를 표시하여 페이지를 보다 사용자 친화적으로 만드는 것입니다. .

list 속성

이 속성도 매우 실용적입니다. html5 사양 이전에는 html 양식 속성에 ComboBox와 유사한 구성 요소가 없었습니다. html5의 목록 속성은 이러한 단점을 보완합니다. 목록 속성의 값은 .../>

요소는 숨겨진 드롭다운 메뉴를 생성하는 데 사용되는 보이지 않는 요소와 동일합니다. 는 요소와 동일한 하위 요소를 포함할 수 있습니다. 이 요소는 목록 속성이 있는 지정된 요소와 함께 사용됩니다. 목록 속성의 텍스트 상자를 더블 클릭하면 에 의해 생성된 드롭다운 메뉴가 표시됩니다.

autocomplete 속성

이 옵션은 텍스트 상자를 클릭할 때 이전 채우기 기록을 자동으로 표시할지 여부를 제어하는 ​​데 사용됩니다. 이 속성은 기본적으로 두 가지 속성 값을 지원합니다.
on: 자동 완성 열기. , 텍스트 상자 아래에 드롭다운 메뉴가 나타납니다.

🎜off🎜: 자동 완성을 끄면 드롭다운 메뉴가 텍스트 상자 아래에 표시되지 않습니다. 🎜

label의 컨트롤 속성

html5은 요소에 대한 컨트롤 속성을 제공합니다. 이 속성은 자바스크립트 스크립트의 요소와 연결된 양식 요소에 액세스하는 데 사용됩니다.

form의 labels 속성

form 요소와 요소 사이에는 일대다 관계가 있습니다. form 요소는 컨트롤 속성을 적용하는 반면, form 요소는 연관된 요소에 대한 labels 속성을 얻습니다.

텍스트 상자의 선택 방향 속성

html5은 한 줄 텍스트 상자와 여러 줄 텍스트 필드에 대한 새로운 SelectionDirection 읽기 전용 속성을 추가합니다. 이 속성은 텍스트 상자에서 텍스트 방향을 반환하는 데 사용됩니다.

• 사용자가 정방향 텍스트를 선택하면 반환 값은 정방향입니다
• 사용자가 역방향 텍스트를 선택하면 반환 값은 역방향입니다
• 사용자가 텍스트를 선택하지 않을 경우 반환 값은 사용자가 마지막으로 선택한 항목

HTML5 양식 요소의 새로운 기능

기능이 풍부한 입력 요소

HTML5는 요소에 대해 다음과 같은 가능한 유형을 추가합니다.

color: 색상 선택기를 생성합니다. 값의 값은 #xxxxxx 형식의 색상 값입니다.
date: 날짜 선택기를 생성합니다.
time: 시간 선택기를 생성합니다.
datetime-local: 현지 날짜 및 시간 선택기를 생성합니다.
week: 사용자가 주를 선택할 수 있는 텍스트 상자를 생성합니다.
month: 인생 추측을 위한 월 선택기입니다.
max: 지정된 날짜 및 시간의 최대값입니다.
step: 날짜와 시간의 단계 크기를 지정합니다.
email: 이메일 입력 상자를 생성하면 브라우저는 입력된 이메일이 형식에 맞는지 자동으로 확인합니다.

multiple: 이 속성은 부울 유형을 지원합니다. 이 속성 값이 지정되면 여러 이메일 주소를 쉼표로 구분하여 입력할 수 있다는 의미입니다.

tel: 전화번호 입력을 위한 텍스트 상자를 생성합니다.
ur: URL 입력을 위한 텍스트 상자를 생성하면 브라우저는 입력된 URL이 형식을 준수하는지 자동으로 확인합니다.
number: 숫자만 입력할 수 있는 텍스트 상자를 생성합니다.

min: 지정된 값의 최소값입니다.
max: 지정된 값의 최대값입니다.
step: 숫자의 단계 크기를 지정합니다.

range: 다음 속성을 사용하여 드래그 바를 생성합니다.

min: 드래그 바의 최소값.
max: 드래그 바의 최대값입니다.
step: 드래그 바의 단계 크기를 지정합니다.

search: 검색 키워드를 입력하기 위한 텍스트 상자를 생성합니다.

output 요소

HTML5에는 출력을 표시하는 데 사용되는 새로운 양식 컨트롤이 추가되었습니다. ID, 클래스, 스타일과 같은 핵심 속성을 지정하는 것 외에도 이 요소는 다음 속성도 지정할 수 있습니다.

for: 이 속성은 요소를 제동할 때 해당 요소 또는 해당 요소의 값을 표시합니다.

meter 요소

HTML5에는 최대값과 최소값이 알려진 계수 미터를 나타내는 새로운 요소도 추가되었습니다. ID, 클래스, 스타일 등과 같은 핵심 기능을 정의하는 것 외에도 이 요소는 다음 속성을 정의할 수도 있습니다.

value: 카운팅 미터의 현재 값을 지정합니다. 기본값은 0.
min: 계수 장치의 최소값을 지정하고, 기본값은 0.
max: 계수 장치의 최대값을 지정합니다. 기본값은 1입니다.
low: 계수 기기의 지정된 범위의 최소값을 지정합니다. 최소값보다 크거나 같아야 합니다.
high: 계수 기기의 지정된 범위의 최대값을 지정합니다. 이 값은 최대값보다 작거나 같아야 합니다.
optimum: 계수 기기의 유효 범위에 대한 최적 값을 지정합니다.

progress

요소는 진행률 표시줄을 나타내는 데 사용됩니다. ID, 클래스, 스타일과 같은 핵심 속성을 지정하는 것 외에도 이 요소는 다음 속성도 지정할 수 있습니다.
max: 진행률 표시줄이 완료될 때의 값을 지정합니다.
value: 현재 완료된 진행률 값을 지정합니다.

HTML5의 새로운 클라이언트 측 검증

검증 속성을 사용하여 검증 수행

HTML5는 양식 컨트롤에 다음 검증 속성을 추가합니다.

required: 이 속성은 양식 컨트롤을 채워야 함을 지정합니다.
pattern: 이 속성은 양식 컨트롤의 값이 지정된 정규식을 준수해야 함을 지정합니다.
min, max, step: 이 세 가지 속성은 숫자 유형 및 날짜 유형의 요소에만 유효하며 min~max 사이여야 하며 단계 크기를 준수해야 합니다.

확인을 위해 checkValidity 메서드 호출

• checkValidity() 메서드를 호출하여 양식 개체가 true를 반환하면 양식에 있는 모든 양식 요소의 입력이 유효하다는 의미입니다

• 양식 개체가 true를 반환하는 checkValidity() 메서드는 표현식의 모든 양식 요소가 입력 확인을 통과했음을 나타냅니다.

유효성 검사 끄기

• 부울 값을 지원하는 속성인 요소에 novalidate 속성을 추가하세요.

• 제출 및 버튼 요소에 대해 formnovalidate 속성을 설정합니다. 사용자가 제출 버튼을 통해 양식을 제출하면 양식에서 확인 기능이 꺼집니다.

위 내용은 서식과 관련된 요소를 종합적으로 정리!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!