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

青灯夜游
Release: 2023-01-29 11:53:24
Original
2779 people have browsed it

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
 各种表单控件 
Copy after login

Four commonly used method submission methods:

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

Form fields and Form button

input tag

    input meaning of input
  • The label is a single label
  • The type attribute sets different attribute values to specify different control types
  • In addition to the type attribute, there are other attributes

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

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

密码框

Copy after login

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

单选框

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

Copy after login

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

复选框

多选框可以选取多个

爱好: 
抽烟 喝酒 烫头
Copy after login

按钮

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

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

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

Copy after login

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

下拉框标签

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

Copy after login

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

相关推荐:《html视频教程

The above is the detailed content of What is the role of forms in the web front-end?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!
Attribute Attribute value Description ##type Normal button Submit button Reset button Submit button in image form ##File The name of the space Default text value in the input control The display width of the input control on the page Maxlength
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