HTML5 양식 관련 요소 및 속성-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5 양식 관련 요소 및 속성

不言

May 03, 2018 pm 03:19 PM

h5html5재산

이 글은 주로 HTML5 양식의 관련 요소와 속성을 소개합니다. 이제는 모든 사람과 공유합니다. 필요한 친구들이 참고할 수 있습니다.

ID를 지정할 수 있습니다. 스타일, 클래스와 같은 핵심 속성도 onclick 이벤트 속성을 지정할 수 있습니다. 또한 다음 속성을 지정할 수도 있습니다.

action: 양식 제출을 위한 URL 또는 URI를 지정합니다.

방법: 요청 방법을 지정합니다(일반적으로 가져오기 또는 게시).

enctype: 양식 콘텐츠를 인코딩하는 데 사용되는 문자 집합을 지정합니다.

name: 일반적으로 id의 속성 값과 일치하는 양식의 고유한 이름을 지정합니다.

target: 대상 URL을 여는 데 사용할 방법을 지정합니다.

enctype 속성은 양식 데이터의 인코딩 방법을 지정하는 데 사용됩니다. 이 속성에는 세 가지 속성 값이 있습니다.

application/x-www-form-urlencoded: 이는 기본 인코딩 방법입니다. 이 인코딩을 사용하는 양식은 양식 컨트롤의 값을 URL 인코딩으로 처리합니다.

multipart/form-data: 이 인코딩 방법은 양식 데이터를 바이너리 방식으로 처리합니다. 이 인코딩 방법은 파일 필드에 지정된 파일의 내용을 요청 매개변수로 캡슐화합니다.

text/plain: 양식의 작업 속성 값이 mailto:URL 형식일 때 사용되는 인코딩 방법입니다. 양식을 통해 직접 이메일을 보내는 데 적합합니다.

양식 컨트롤을 요청 매개변수로 변환하는 규칙은 다음과 같습니다.

이름 속성이 있는 각 양식 컨트롤은 요청 매개변수에 해당합니다. 이름 속성이 없는 양식 컨트롤은 요청 매개변수를 생성하지 않습니다.

여러 양식 컨트롤에 동일한 이름 속성이 있는 경우 여러 양식 컨트롤은 하나의 요청 매개변수만 생성하지만 이 매개변수에는 여러 값이 있습니다.

양식 컨트롤의 name 속성은 요청 매개변수 이름을 지정하고, value 속성은 요청 매개변수 값을 지정합니다.

양식 컨트롤이 비활성화 또는 비활성화="비활성화" 속성을 설정하면 양식 컨트롤은 더 이상 요청 매개변수를 생성하지 않습니다.

한 줄 텍스트 상자: 요소의 유형 속성을 텍스트로 지정합니다.

비밀번호 텍스트 상자: 요소의 유형 속성을 비밀번호로 지정하세요.

Hidden 필드: 요소의 유형 속성을 숨김으로 지정합니다.

Radio 버튼: 요소의 유형 속성을 라디오로 지정합니다.

Checkbox: 요소의 유형 속성을 체크박스로 지정합니다.

이미지 도메인: 요소의 유형 속성을 지정합니다.

파일 업로드 도메인: 요소의 유형 속성을 지정합니다.

제출, 재설정 및 작업 없음 버튼: 요소의 유형 속성을 각각 제출, 재설정 또는 버튼으로 지정하세요.

요소는 id, 스타일, 클래스와 같은 핵심 속성, onclick과 같은 이벤트 속성, onfocus 및 onblur와 같은 포커스 이벤트 속성을 지정할 수 있습니다. 또한 다음 속성도 지정할 수 있습니다.

checked: 라디오 버튼과 체크박스가 기본적으로 선택되어 있는지 여부를 설정합니다.

disabled: 요소가 비활성화되었음을 나타냅니다. type="hidden"인 경우 이 속성을 지정할 수 없습니다.

maxlength: 입력 상자에 입력할 수 있는 최대 문자 수를 지정합니다.

readonly: 지정된 텍스트 상자의 내용은 수정할 수 없습니다.

size: 요소의 너비를 지정합니다. type="hidden"인 경우 이 속성을 지정할 수 없습니다.

src: 이미지 필드에 표시되는 이미지의 URL을 지정합니다. 이 속성은 type="image"인 경우에만 지정할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
    <title>getForm</title>
</head>
<body>
    <form action="http://www.crazyit.org" method="get">
        单行文本框：<input id="username" name="username" type="text" readonly="readonly"/><br/>
        密码框：<input id="password" name="password" type="password"/><br/>
        隐藏域：<input id="hidden" name="hidden" type="hidden"/><br/>
        第一组单选框：<br/>
        <input id="color" name="color" type="radio" value="red"/>
        <input id="color2" name="color" type="radio" value="green"/>
        <input id="color3" name="color" type="radio" value="blue"/><br/>
        第二个单选框：<br/>
        <input id="gender" name="gender" type="radio" value="male"/>
        <input id="gender2" name="gender" type="radio" value="female"><br/>
        两个复选框：<br/>
        <input id="website" name="website" type="checkbox" value="leegang.org"/>
        <input id="website2" name="website" type="checkbox" value="crazyit.org"/><br/>
        文件上传域：<input id="file" name="file" type="file"/><br/>
        图像域：<input type="image" src="img/wjc.gif" alt="疯狂Java联盟"/><br/>
        下面是四个按钮：<br/>
        <input id="ok" name="ok" type="submit" value="提交"/>
        <input id="dis" name="dis" type="submit" value="提交" disabled="disabled"/>
        <input id="cancle" name="cancle" type="reset" value="重填"/>
        <input id="no" name="no" type="button" value="无动作"/>
    </form>
</body>
</html>

레이블을 양식 컨트롤과 연결하는 방법에는 두 가지가 있습니다.

암시적으로 for 속성을 사용합니다. for 속성은 연결된 양식 컨트롤의 id 속성 값입니다. (권장)

연관 표시: 요소 내에 일반 텍스트와 양식 컨트롤을 함께 배치합니다.

<form action="http://www.crazyit.org" method="get">
        <label for="username">单行文本框：</label>
        <input id="username" name="username" type="text"/><br/>
        <label>密码框：<input id="password" name="password" type="password"/></label><br/>
        <input id="ok" type="submit" value="登录疯狂Java联盟"/>
    </form>

내부에는 일반 텍스트, 텍스트 서식 지정 태그, 이미지 및 기타 콘텐츠가 포함될 수 있으며 입력 버튼보다 기능이 더 풍부합니다.

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

disabled: 버튼을 비활성화할지 여부.

name: 버튼의 고유한 이름을 지정합니다.

type: 버튼이 어떤 종류의 버튼에 속하는지 지정합니다. 속성 값은 버튼, 재설정 또는 제출만 가능합니다.

value: 버튼의 초기 값을 지정합니다.

<form action="http://www.crazyit.org" method="get">
        <button type="button"><b>提交</b></button><br/>
        <button type="submit"><img src="/static/imghwm/default1.png"  data-src="images/wjc.gif"  class="lazy"   alt="crazyit.org"/></button><br/>
    </form>

id, style, class 등과 같은 핵심 속성을 지정할 수 있습니다. 이 요소는 onchange 이벤트 속성만 지정할 수 있습니다. 또한 다음 속성을 지정할 수도 있습니다.

disabled: 목록 상자와 드롭다운 메뉴를 비활성화하도록 설정합니다.

다중: 다중 선택을 설정합니다.

크기: 목록 상자가 동시에 여러 목록 항목을 표시할 수 있도록 지정합니다.

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

: 목록 항목과 메뉴 항목을 정의하는 데 사용됩니다.

: 목록 항목 및 메뉴 항목 그룹을 정의하는 데 사용됩니다. 이 요소는 하위 요소만 포함할 수 있습니다.

요소는 id, 스타일, 클래스와 같은 핵심 속성은 물론 onclick, onselect 및 onchange 이벤트 속성을 지정할 수 있습니다. 또한 이 요소는 다음 속성을 지정할 수도 있습니다.

cols: 텍스트 필드의 너비를 지정합니다.

rows: 텍스트 필드의 높이를 지정합니다.

disabled: 이 텍스트 필드를 비활성화합니다.

readonly: 지정된 텍스트는 읽기 전용입니다.

관련 기사

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.