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

집

웹 프론트엔드

HTML 튜토리얼

HTML5 양식 관련 요소 및 속성

不言

May 03, 2018 pm 03:19 PM

h5 html5 재산

이 글은 주로 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>

로그인 후 복사