HTML notes: form input tag

Abstract: WeChat search [ Sanqiao Jun ]
Description: This is a code note about HTML5

1. Theoretical knowledge

Form label
from: The outermost container of the form
input: The label is used to collect user information and display different controls, such as input boxes, password boxes, check boxes, etc., according to different type attribute values.
Insert picture description here

2. Reference example

(1)
1. Code

<form>
          <h1>输入框</h1>
          <input type="text" placeholder="请输入用户名">
          <h1>密码框</h1>
          <input type="password" placeholder="请输入密码">
          <h2>复选框</h2>
          <input type="checkbox" checked>苹果
          <input type="checkbox">香蕉
          <input type="checkbox" disabled>葡萄
          <h2>单选框</h2>
          <input type="radio" name="gender">男
          <input type="radio" name="gender">女
          <h2>上传文件</h2>
          <input type="file">
          <h2>提交按钮和重置按钮</h2>
            <input type="submit">
            <input type="reset">
      </form>

2. Results
Insert picture description here
(two)
1. Code

        <form>
            <h2>多行文本</h2>
            <textarea name="多行文本" id="" cols="30" rows="10"></textarea>
            <h2>下拉菜单</h2>
            <select name="下拉菜单" id="">
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">杭州</option>
            </select>
            <select name="下拉菜单" id="" >
                <option value="" selected disabled>请选择</option>
                <option value="" >北京</option>
                <option value="">上海</option>
                <option value="">杭州</option>
            </select>
            <select name="下拉菜单" id="" size="3">
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">杭州</option>
            </select>

            <input type="file" multiple>
            
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女

            <input type="radio" name="gender" id="man"><label for="man">男</label>
            <input type="radio" name="gender" id="woman"><label for="woman">女</label>          
        </form>

2. Results
Insert picture description here

3. Q&A

1. How to add prompt text in the input box?
placeholder

<input type="text" placeholder="请输入用户名">

2. How to add default text in the input box?
value

<input type="text" placeholder="请输入用户名" value="Mickey">

3. How to make the default good option?
checked

<input type="checkbox" checked>苹果

4. How to make the option non-selectable?
disabled

<input type="checkbox" disabled>葡萄

5. How to set the single selection option?
Add this name="gender" to each option

<input type="radio" name="gender">男
<input type="radio" name="gender">女

6. How to add a multi-line text box?
textarea label
cols row
width

<textarea name="多行文本" id="" cols="30" rows="10"></textarea>

7. How to change the default option of the drop-down menu?
selected

<option value="" selected disabled>请选择</option>

8. How does the drop-down menu make the options unavailable?

<option value="" selected disabled>请选择</option>

9. How does the drop-down menu make multiple option boxes? (The default is an option)
size

<select name="下拉菜单" id="" size="3">

10. How to make multiple choices in the drop-down menu?
multiple

<select name="下拉菜单" id="" multiple>

11. How to make multiple selections for file upload?
multiple

<input type="file" multiple>

12. How to make single-selection options can be selected by clicking on the text? (That is to expand the scope of option clicks)
label

<input type="radio" name="gender" id="man"><label for="man">男</label>
            <input type="radio" name="gender" id="woman"><label for="woman">女</label>

It is not easy to organize articles. If you have any help, please like and follow your support, thank you! Wechat search for [ Sanqiao Jun ], and reply [Follow] with a resource package prepared by me. Follow-up continuous update~~~