A brief discussion on name, value in input and for in label

This article will briefly talk about name, value in input and for in label. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Input has many attributes, the more commonly used ones are type, value, name, placeholder, multiple, checked, etc. I have always been confused about the name, value, label and the text outside the label, but I finally figured it out today.

1) name attribute

　Definition: The name attribute specifies the name of the input element.

　Usage: The name attribute is used to identify the form data after it is submitted to the server, or to reference the form data through JavaScript on the client.

　Note: Only form elements with the name attribute set can pass their values ​​when submitting the form.

In other words, name is of no use for page display (adding it or not does not affect page display), but is used for easy reference when interacting with the server or writing js.

2) value attribute

Definition: The value attribute sets the value for the input element.

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

• type="button", "reset", " submit" - Define the text displayed on the button

<input>按钮文字

• type="text", "password", "hidden" - Defines the initial value of the input field

<input>标签外

                                   

##type= "checkbox", "radio", "image" - Defines the value associated with the input What is displayed on the page is the "button text" (text outside the label), and the value at this time is mainly used for interactive operations in js, so the value at this time is generally set to a value related to the input. For example:

• <input>按钮文字

  Note: The value attribute must be set in and .

3) label

The label defines the label (marker) for the input element. For example:

<input>男

The above two methods display the same results, as shown in the figure below:

So: label element does not Any special effects

will be presented to the user. However, it improves usability for mouse users. This control is triggered if you click on the text inside the label element. That is to say, when the user selects the label, the browser will automatically turn the focus to the form control related to the label.

The for attribute of the label should be the same as the id attribute of the related element

.

What does the above sentence mean? That is to say, if you write it as follows, When the mouse clicks "Please enter your email address", the effect is the same as clicking on the input box (that is, the input box will be focused), that is, the label will be bound to the corresponding input. Together.

<label>请输入邮箱地址：</label>      
    <input type="text" name="email" value="这是一个文本输入框"/>

请输入邮箱地址：     
     <input type="text" name="email" value="这是一个文本输入框"/>

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit HTML Video Tutorial! Related recommendations:

php public welfare training video tutorial

The above is the detailed content of A brief discussion on name, value in input and for in label. For more information, please follow other related articles on the PHP Chinese website!