What is the role of forms in the web front-end?-Front-end Q&A-php.cn

The form has two functions: 1. For users, it is an interface for data entry and submission; 2. For websites, it is a way to obtain user information. A form has three basic components: 1. The form tag, which contains the URL of the CGI program used to process the form data and the method for submitting the data to the server; 2. The form field, which includes the text box, password box, hidden field, and multi-line text boxes, etc.; 3. Form buttons, including submit buttons, reset buttons and general buttons, are used to transfer data to CGI scripts on the server or cancel input, etc.

What is the role of forms in the web front-end?

The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

Forms in the web front-end

The form’s role in the web page cannot be underestimated. It is mainly responsible for the data collection function. For example, you can collect Visitor's name and e-mail address, questionnaire, guestbook, etc.

The role of the form:

For the user, the form is an interface for data entry and submission;
Forms are a way for websites to obtain user information.

A form has three basic components:

##Form tag

: This contains the URL of the CGI program used to process form data and the method for submitting data to the server.
Form fields: including text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio button boxes, drop-down selection boxes and file upload boxes, etc.
Form buttons: including submit buttons, reset buttons and general buttons; used to transfer data to CGI scripts on the server or cancel input. You can also use form buttons to control other definitions Handle script processing.

Form tag

The form tag is used to create an HTML form for user input (form fields ) to realize the collection and delivery of user information, and all content in the form will be submitted to the server.

The form form field can contain various interactive controls - control labels (text fields, check boxes, radio boxes, submit buttons, etc.), such as , , < ; select>, and other tags.

Tag syntax format

<form action="提交地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

Copy after login

Four commonly used method submission methods:

get         一般用来查询信息
post        一般用来新增信息
put         一般用来修改信息
delete      一般用来删除信息

Copy after login

Form fields and Form button

input tag

The label is a single label

type="text" is a normal input box and value is the value inside. Name and id will be used when writing js.

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="text" name="" id="" value="你好">
    </form>

Copy after login

What is the role of forms in the web front-end?

Some attributes of the input tag:

The checked attribute is only available for radio buttons and check boxes

AttributeAttribute valueDescription##typeNormal buttonSubmit buttonReset buttonSubmit button in image form##File The name of the spaceDefault text value in the input controlThe display width of the input control on the pageMaxlength

密码框

<input type="password" name="" id="" value="">

Copy after login

What is the role of forms in the web front-end?

单选框

name相同的单选框智能选择一个

        男 <input type="radio" name="gender" id="" value=""> 
        女 <input type="radio" name="gender" id="" value="">

Copy after login

What is the role of forms in the web front-end?

复选框

多选框可以选取多个

        爱好： <br> 
        抽烟<input type="checkbox" name="hobby" id="" value=""> 
        喝酒<input type="checkbox" name="hobby" id="" value=""> 
        烫头<input type="checkbox" name="hobby" id="" value="">

Copy after login

按钮

普通按钮可以根据需求来用js添加功能

提交按钮会把输入的表单信息提交到form表单的action地址

重置按钮会把表单信息重置为默认

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="button" name="" id="" value="我是一个普通按钮">
        <input type="submit" name="" id="" value="我是一个提交按钮">
        <input type="reset" name="" id="" value="我是一个重置按钮">
    </form>

Copy after login

What is the role of forms in the web front-end?

下拉框标签

下拉框标签有点特殊，不是input的属性而是一个单独的标签

        <select name="省市区" id="">
            <option value="">山东</option>
            <option value="">北京</option>
            <option value="">江苏</option>
            <option value="">深圳</option>
            <option value="">上海</option>
        </select>

Copy after login

What is the role of forms in the web front-end?


Text	Single line text input box
Password	Password input box
Radio	Radio button
Checkbox	Checkbox
##Button
Submit
Reset
Image
Text field		name
		value
		size
		checked
##Define the default selected items in the selection space
The maximum number of characters allowed to be entered by the control