집 > 기사 > 웹 프론트엔드 > HTML5 양식 관련 요소 및 속성

HTML5 양식 관련 요소 및 속성

不言원래의: 2018-05-03 15:19:311393검색

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

ff9c23ada1bcecdd1a0fb5d5a0f18437:

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 속성은 요청 매개변수 값을 지정합니다.

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

d5fd7aea971a85678ba271703566ebfd:

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

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

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

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

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

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

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

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

0f0306f9b187f2e363126bc29c8b1420 요소는 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>

bfdf57554631c62e63917d588904f58a:

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

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

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

<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>

de935b9c153fbe5d6ad7df96bd65d7b8:

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

de935b9c153fbe5d6ad7df96bd65d7b8 요소는 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="images/wjc.gif" alt="crazyit.org"/></button><br/>
    </form>

815c08aea17433a6272b681dc1d34168:

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

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

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

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

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

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

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

43d7dfa79a91949688a1bed28448d8e3:

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

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

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

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

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

HTML5 양식 관련 요소 및 속성

관련 기사