Table of contents

1. Features

2. Form syntax and attributes

3. input element

4. select and drop-down selection boxes

5. textarea multi-line text field

6.label associated controls

sentence a day

1. Features

1. Provides some visual input controls
2. Automatically collect and organize user input and submit it to the server

2. Form syntax and attributes

1. <form></form>
2. Properties that can be added:
   1. action="url" to which address to submit data, if not written, it will be submitted to the current page itself
   2. method="get" form data submission method
   3. enctype="" specifies the encoding method of the form data, and defines what type of data the form allows to pass to the server
      1. application/x-www-form-urlencoded default value, allowing to pass arbitrary characters (cannot pass files)
      2. multipart/form-data can pass files and arbitrary characters
      3. text/plain allows passing ordinary characters (symbols such as & = * @ are not ordinary characters)

3. input element

1. public properties:
   1. type sets the type of the input element, the default value is text
   2. name is a name for the control, note: the form must write the name, and this data cannot be submitted without writing
   3. value saves the value entered by the user, and after submitting it to the server, you can later obtain the submitted user input value with .value
   4. If the control is a button, value is the text displayed on the button
2. text box and password box
   1. type="text" normal text input box
   2. type="password" password box
   3. Attribute: maxlength="5" Sets the maximum length that can be entered in the input box
   4. placeholder="" prompt text
   5. value="" The initial value, it will exist by default if it is not written in the label, the value is an empty string

   6. <!-- normal text input box -->
      			username<input type="text" value="kim" name="uname" maxlength="5" placeholder="please enter user name"/>
      
      <!-- password box -->
      			password<input type="password" name="upwd" placeholder="Please enter password"/>

3. button
   1. type="submit" submit button
      1. Automatically collect and sort out the data entered by the user (controls with the name attribute), and submit a request to send
   2. type="reset" reset button
      1. Initialize the form control and restore it to its initial state, pay attention! not empty
   3. type="button" normal button
      1. Need to bind events late, execute the corresponding JS script
   4. Note: The value on the button represents the text displayed on the button

   5. <!-- button -->
      			<input type="submit" value="I want to submit">
      			<input type="reset" value="i want to reset">
      			<input type="button" value="normal button">

4. radio and multi-select boxes
   1. type="radio" radio
   2. type="checkbox" Multiple choice
   3. Attributes:
        
      1. name (must be added), name the control and use it for grouping
      2. A group of radio/multi-select boxes must have the same name to achieve single-select/multi-select effects
      3. The value must be written, otherwise the submission is on
      4. checked indicates that the current item is selected by default and is a single-value attribute

   4.             <!-- Single box -->
      			gender
      			<input type="radio" value="1" name="gender">male
      			<input type="radio" value="0" name="gender" checked>Female
      			<br>
      
      			<!-- Checkbox -->
      			Hobby
      			<input type="checkbox" name="like" value="1" checked>music
      			<input type="checkbox" name="like" value="2">cartoon
      			<input type="checkbox" name="like" value="3">dance
      			<input type="checkbox" name="like" value="4">Gaming
      
      			<br>
      			favorite novel
      			<input type="checkbox" name="xs" value="1">Douluo Continent
      			<input type="checkbox" name="xs" value="2">Swordsman in the Snow
      			<input type="checkbox" name="xs" value="3">Devour the starry sky
      			<input type="checkbox" name="xs" value="4">The overbearing president of rebirth falls in love with me

5. File Upload
   1. Please select the file you want to upload <input type="file" name="ufile"/>
   2. The premise of use: method="post" enctype="multipart/form-data"
   3. multiple can submit multiple files and is also a single-value attribute

   4. <!-- File Upload -->
      			Please select the file you want to upload<input type="file" name="ufile" multiple/>

4. select and drop-down selection boxes

1. <select>
              <option></option>
   </select> 

2. selected means that the option is selected by default
3. multiple means that the drop-down box can be selected more than one, and you can select multiple options by holding down Ctrl
4. When submitting, if the value attribute is not set for the option, the text between the option tags is submitted, but if the value attribute of the option is set, the value of the value is submitted.

5. favourite sport
   			<!-- Press and hold when selecting multiple Ctrl to choose multiple -->
   			<select name="sports" multiple>
   				<option value="0">swim</option>
   				<option value="1" selected>pingpong</option>
   				<option value="2">Run</option>
   				<option value="3">Liu Genghong</option>
   			</select>
   			<br>

6. <!-- drop down selection box -->
   			favorite dishes
   			<select name="food">
   				<option value="0">Nanjing Salted Duck</option>
   				<option value="1">Chongqing steamboat</option>
   				<option value="2">Chaoshan casserole porridge</option>
   				<option value="3">Northeast big stew</option>
   				<option value="4">Nanchang Mixed Noodles</option>
   			</select>

5. textarea multi-line text field

1. <textarea name="content"></textarea>
2. Attributes:
   1. cols="30" The number of columns in the text field, the width is changed
   2. rows="10" The number of rows in the text field, the height is changed
   3. Note: The default text field size can be changed by the user by dragging at will. To disable dragging:
   4. style="resize: none;"

3. <!-- multiline text field -->
   			Please leave your valuable suggestions here:
   			<textarea name="content" cols="30" rows="10" style="resize: none;"></textarea>

6.label associated controls

1. Used to associate text and controls in the form, click the text, the effect is the same as clicking the control
2. <label for="The id value of the control to be associated"></label>

3. <!-- label Associated controls -->
   			<hr>
   			<input type="checkbox" name="yes" value="1" id="y">
   			<label for="y">Please agree to this agreement</label>

sentence a day

Shushan has road and diligence as the path, and the sea of ​​learning has no end to work hard.

"Diligence is a shortcut to the peak of knowledge, and you can swim freely in the ocean of knowledge without fear of hardship."