Home > Article > Web Front-end > HTML5 form related elements and attributes
HTML5 form related elements and attributes
- 不言Original
- 2018-05-03 15:19:311435browse
This article mainly introduces the relevant elements and attributes of HTML5 forms, which has certain reference value. Now I share it with everyone. Friends in need can refer to it
ff9c23ada1bcecdd1a0fb5d5a0f18437:
You can specify core attributes such as id, style, class, etc., and you can also specify onclick event attributes. In addition, you can also specify the following attributes.
action: Specify the URL or URI for form submission.
method: Specify the request method, usually get or post.
enctype: Specify the character set used to encode the form content.
name: Specify the unique name of the form, generally consistent with the attribute value of id.
target: Specify which method to use to open the target URL.
enctype attribute is used to specify the encoding method of form data. This attribute has three attribute values:
application/x-www-form-urlencoded: This is the default encoding method, it only processes The value attribute value in the form control. A form using this encoding method will process the value of the form control into URL encoding.
multipart/form-data: This encoding method will process the form data in a binary manner. This encoding method will encapsulate the content of the file specified in the file field into the request parameters.
text/plain: This encoding method is used when the action attribute value of the form is in the form of mailto:URL. It is suitable for sending emails directly through the form.
The rules for converting form controls into request parameters are as follows:
Each form control with a name attribute corresponds to a request parameter. Form controls without a name attribute will not generate request parameters.
If multiple form controls have the same name attribute, multiple form controls only generate one request parameter, but this parameter has multiple values.
The name attribute of the form control specifies the request parameter name, and the value attribute specifies the request parameter value.
If a form control sets the disabled or disabled="disabled" attribute, the form control will no longer generate request parameters.
d5fd7aea971a85678ba271703566ebfd：
Single-line text box: Specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as text.
Password text box: Specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as password.
Hidden domain: Specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as hidden.
Radio button: Specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as radio.
Check box: Specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as checkbox.
Image domain: Specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as image.
File upload domain: Specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as file.
Submit, reset, and no-action buttons: specify the type attribute of the 0f0306f9b187f2e363126bc29c8b1420 element as submit, reset, or button respectively.
0f0306f9b187f2e363126bc29c8b1420 elements can specify core attributes such as id, style, and class, event attributes such as onclick, and focus event attributes such as onfocus and onblur. In addition, you can also specify the following attributes:
checked: Set the radio button and whether the check box is checked by default.
disabled: Indicates that the element is disabled. This attribute cannot be specified when type="hidden".
maxlength: Specify the maximum number of characters allowed to be entered in the input box.
readonly: The content of the specified text box is not allowed to be modified.
size: Specify the width of the element. This attribute cannot be specified when type="hidden".
src: Specifies the URL of the image displayed in the image field. This attribute can only be specified when 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:
There are two ways to associate labels with form controls:
Implicitly use the for attribute: for The attribute is the id attribute value of the associated form control. (Recommended)
Display association: Place ordinary text and form controls together inside the bfdf57554631c62e63917d588904f58a element.
<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:
It can contain ordinary text, text formatting tags, images, etc. It has richer functions than the input button.
de935b9c153fbe5d6ad7df96bd65d7b8 elements can specify core attributes such as id, style, class, etc., and can also specify event response attributes such as onclick. In addition, you can also specify the following attributes:
disabled: whether to disable the button.
name: Specify a unique name for the button.
type: Specify what kind of button the button belongs to. The attribute value can only be button, reset or submit.
value: Specify the initial value of the button.
<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:
You can specify core attributes such as id, style, class, etc. This element can only specify the onchange event attribute. In addition, you can also specify the following attributes:
disabled: Set to disable the list box and drop-down menu.
multiple: Set multiple selections.
size: Specify that the list box can display multiple list items at the same time.
815c08aea17433a6272b681dc1d34168 elements can only contain the following two elements:
d8f14978b2105a39d07c390b6142b1e4: used to define list items and menu items.
ab954e0f6bf894bea018459b7fa67ae0: used to define list items and menu item groups. This element can only contain d8f14978b2105a39d07c390b6142b1e4 sub-elements.
43d7dfa79a91949688a1bed28448d8e3:
43d7dfa79a91949688a1bed28448d8e3 elements can specify core attributes such as id, style, and class, as well as onclick, onselect, and onchange event attributes. In addition, this element can also specify the following attributes:
cols: Specify the width of the text field.
rows: Specify the height of the text field.
disabled: Disable this text field.
readonly: The specified text is read-only.
Related recommendations:
Introduction to knowledge points related to HTML forms
HTML5 form attribute tutorial examples
The above is the detailed content of HTML5 form related elements and attributes. For more information, please follow other related articles on the PHP Chinese website!