Table of Contents
用户注册页面
Home Web Front-end HTML Tutorial Summary of relevant knowledge about forms in HTML (code examples)

Summary of relevant knowledge about forms in HTML (code examples)

Oct 12, 2018 pm 05:32 PM
css html html5

This article brings you a summary of relevant knowledge about forms in HTML (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When users become familiar with static web page production, they will feel that its functions are single and will want to build interactive dynamic websites. One element often used in dynamic websites is forms. Forms are an important part of HTML and serve as a communication bridge between website administrators and users.

Form label--from

is a double label. The data contained in the label includes form controls and necessary accompanying data, such as control labels, scripts for processing data, etc. There are mainly 5 basic attributes such as form name, data processing, and data transmission method. Among them, the program processing and data transmission method of the form are essential.

Program processing attribute--action

The form itself is useless. The information filled in by the user needs to be processed by the program. The 'action' in the form is Defines the destination file to which the form is to be submitted. After receiving the information, the destination file is usually connected to a program to process the data.
The attribute value can be a program or the URL address of a script

Copy after login
Copy after login
Copy after login
Copy after login

##The form name attribute --name
is used to name the form. It is recommended that each form be given a name that matches its function to prevent confusion when the information is submitted to the background program for processing.

Copy after login
Copy after login
Copy after login
Copy after login

##Data transmission method --method
defines the method of sending form data. The data is sent to the page specified by the 'action' attribute, mainly for processing on the server side. It can be sent as a URL variable (method='get') or HTTP post (method='post').

Copy after login
Copy after login
Copy after login
Copy after login

#Input class control
Form elements are also called form controls. They are divided into input classes and drop-down menu classes according to the filling method. Defined with the <input> tag.

Copy after login
Copy after login
Copy after login
Copy after login
<input>

Text box--text

The most common text input area, in the login area, discussion area, etc. Display as a single-line text box on the page

<input>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

If you want the text box to be read-only, you can use the 'readonly' setting

<input>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

Password box--password

Hide the content of the input box, the entered characters will be replaced by '*'

<input>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

Radio button--radio

When multiple options appear and only Radio buttons are used when selecting one. To specify that an option is selected by default, use the 'checked' attribute to define it. There can only be one radio button set. To pass it to the handler, the value attribute needs to be set.

<input>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

Checkbox--checkbox

is an option box that can select multiple options, or multiple options can be selected by default.

<input>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

Text area--textarea

is mainly used to enter multi-line text, commonly found in messages and comment areas. 'rows' text field row number, 'cols' text field column number.

<textarea>
</textarea>
Copy after login
nbsp;html>


    <meta>
    <title>表单标签</title>


Copy after login
    

用户注册页面

    用户名:<input>
    密    码:<input>
    确认密码:<input>
    
    你的年龄是:     <input>18岁以下     <input>19-35岁     <input>35岁以上     
    你的个人爱好:     <input>阅读     <input>写作     <input>运动     <input>游戏     <input>其他     
    自我介绍     
    

Summary of relevant knowledge about forms in HTML (code examples)

##Button

Standard button--button

Common small gray block needs to be associated with the corresponding script program to process the form. 'value' can set the text to be displayed on the button, 'onclick' Some functions of mouse handling can be implemented.

<input>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

Submit button and reset button--

is a special type of button that does not require setting parameters and can also be used to process form data. Generally speaking, the submit button and the reset button appear at the same time.

<input>
<input>
Copy after login

Menu list control

Drop-down menu

can save page space. tag. 'selected' indicates the initially selected option.
<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>
Copy after login
nbsp;html>


    <meta>
    <title>按钮</title>


Copy after login
    用户名:<input>
    密    码:<input>
    
    生日          

Summary of relevant knowledge about forms in HTML (code examples)

The above is the entire content of this article. For relevant knowledge about HTML, you can refer to the

HTML Development Manual of the PHP Chinese website to learn.

The above is the detailed content of Summary of relevant knowledge about forms in HTML (code examples). For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

React's Role in HTML: Enhancing User Experience React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What Does H5 Refer To? Exploring the Context What Does H5 Refer To? Exploring the Context Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

Is h5 same as HTML5? Is h5 same as HTML5? Apr 08, 2025 am 12:16 AM

"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

HTML: The Structure, CSS: The Style, JavaScript: The Behavior HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web Design The Future of HTML: Evolution and Trends in Web Design Apr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

See all articles