HTML5 form related elements and attributes-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML5 form related elements and attributes

不言

May 03, 2018 pm 03:19 PM

h5 html5 Attributes

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

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.

：

Single-line text box: Specify the type attribute of the element as text.

Password text box: Specify the type attribute of the element as password.

Hidden domain: Specify the type attribute of the element as hidden.

Radio button: Specify the type attribute of the element as radio.

Check box: Specify the type attribute of the element as checkbox.

Image domain: Specify the type attribute of the element as image.

File upload domain: Specify the type attribute of the element as file.

Submit, reset, and no-action buttons: specify the type attribute of the element as submit, reset, or button respectively.

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>

Copy after login

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

Copy after login