html learning and summary form input series tags

Article Directory

- - form label

form label

input series label

Label	Attributes	illustrate
input	text	text box
input	password	password box
input	radio	Single box
input	checkbok	Checkbox checked is selected by default
input	file	File upload multiple setting means multiple selection
input	submit	submit button
input	reset	reset
input	button	normal button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 写什么就显示什么 -->
    文本框: <input type="text">
    <br>
    <br>
    <!-- 书写的内容都会变成点点显示 -->
    密码框: <input type="password">
    <br>
    <br>
    单选框: <input type="radio">
    <br>
    <br>
    多选框: <input type="checkbox">
    <br>
    <br>
    上传文件: <input type="file">
    <br>
    <br>
    提交按钮：<input type = "submit">
    <br>
    <br>
    重置按钮：<input type = "reset">
    <br>
    <br>
    普通按钮：<input type = "button">
</body>
</html>

Document Text box:

Password box:

Radio box:

Multi-choice box: Multi-choice box: Multi-choice box:

Upload file:

Submit button:

Reset button:

Normal button:

➢value attribute: the content entered by the user will be sent to the backend server after submission

➢name attribute: the meaning of the current control, after submitting, you can tell the backend what the meaning of the data sent in the past is

➢The format of the data received by the backend is: attribute value of name = attribute value of value

Form input summary

insert image description here

button button label

➢Scene: Display the button clicked by the user on the web page

➢Tag name: button

➢type attribute value (same as input button series):

➢ Notes:

• The default button in Google Chrome is the submit button

• The button tag is a double tag, which is easier to wrap other content: text, pictures, etc.

Label	Properties and Description
button	submit submit
button	reset reset
button	button normal button

select dropdown menu label

➢Scenario: A drop-down menu form control that provides multiple options in a web page

➢Label Composition:

• select tag: the overall drop-down menu

• option label: each item of the drop-down menu

➢Common attributes:

• selected: the default selection of the drop-down menu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
    </select>
    
</body>
</html>

Document Beijing Shanghai Guangzhou Shenzhen

textarea text field label

➢Scenario: Provide a form control that can enter multiple lines of text in a web page

➢Tag name: textarea

➢Common attributes:

• cols: Specifies the visible width of the text field

• rows: Specifies the number of visible rows in the text field

➢ Notes:

• The lower right corner can be dragged to change the size

• CSS settings are recommended for style effects during actual development

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea cols="60" rows="30"></textarea>
</body>
</html>

Document

label label

➢Scenario: often used to bind the relationship between content and form tags

➢Label name: label

➢How to use①:

Use label tags to wrap content (such as: text)
Add id attribute on form tag
Set the corresponding id attribute value in the for attribute of the label tag

➢How to use②:

Directly use the label tag to wrap the content (such as: text) and the form tag together
You need to delete the for attribute of the label tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别: 
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <label><input type="radio" name="sex"> 女</label>
</body>
</html>

Document Gender: male female