Home Web Front-end HTML Tutorial How to get the value of the input tag in HTML? Detailed explanation on the usage of input value

How to get the value of the input tag in HTML? Detailed explanation on the usage of input value

Aug 28, 2018 pm 05:59 PM
html input

This article mainly talks about the usage and value of the value attribute of the HTML input tag, as well as the associated values ​​of the value attribute of the input tag. Let’s take a look at this article together

First let’s take a look at the usage of the input tag in HTML:

The value attribute is the specified value of the input element .

For different types of input elements, the usage of the value attribute is also different:

For "button", "reset", "submit" types - define the text on the button

For "text", "password", "hidden" types - define the initial (default) value of the input field

For "checkbox", "radio", "image" types - define the values ​​related to the input element value. This value is sent to the form's action URL.

Note: The value attribute is required for and .

Note: The value attribute does not apply to .

Having said so much, let’s take a look at an example:

A form with a predefined value for the value attribute:

<form action="demo_form.asp" method="get">
  请输入用户名: <input type="text" name="fname" value="Bill" /><br />
  第二次用户名: <input type="text" name="lname" value="Gates" /><br />
  <input type="submit" value="提交" />
</form>
Copy after login

The effect is shown in the figure:

How to get the value of the input tag in HTML? Detailed explanation on the usage of input value

The above picture is the result of the code, which is the defined form.

Now let’s take a look at the associated value:

Take the input box as an example, can each box be input? This content is the value associated with the input box. If you set a value attribute for it, then the value you set is its value, which will be displayed in the input box. Similarly, a radio button can also set a value, but this value is not displayed like an input box if you set it, but setting it means it has such a value, just like marking whether it is male or female. It may not be possible to tell whether it is a boy or a girl, but it can be marked.

Sometimes you need to adjust an input tag from one position to another. The value of the input after adjustment is the value of the value attribute in the input tag. If the way you modify the value does not modify the value attribute, then adjust The value you set will be lost.

<form> 
<input id="input" type="input" value=&#39;2&#39;></input> 
</form>
Copy after login

So if you have the above operation, please make sure that the way you modify the value changes the value attribute of the input, or use other methods to achieve the above operation, such as jQuery's clone method.

Another checkbox method for the input tag:

<form action="demo-form.php">
  <input type="checkbox" name="vehicle[]" value="Bike">我会PHP<br>
  <input type="checkbox" name="vehicle[]" value="Car">我会html<br>
  <input type="checkbox" name="vehicle[]" value="Boat">我会python<br>
  <input type="submit" value="提交">
</form>
Copy after login

The effect of the above code is as shown in the figure:

How to get the value of the input tag in HTML? Detailed explanation on the usage of input value

Okay , now this article is over, if you have any questions please leave a message below

[Editor’s recommendation]

in HTML How to write relative path in base tag? (Introduction to use included)

What is the usage of the src attribute of the HTML img tag? Analysis of specific usage methods (examples attached)

The above is the detailed content of How to get the value of the input tag in HTML? Detailed explanation on the usage of input value. 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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

How do you parse and process HTML/XML in PHP? How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles