After watching the teaching video, I can get the code and knowledge points down here for my convenience in the future.
HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Registration page</title> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>New user registration</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--Define form form--> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">User name</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="enter one user name"></td> </tr> <tr> <td class="td_left"><label for="password">Password</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="Please input a password"></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="Please enter email"></td> </tr> <tr> <td class="td_left"><label for="name">Full name</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="Please enter a name"></td> </tr> <tr> <td class="td_left"><label for="tel">Cell-phone number</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="Please enter your mobile number"></td> </tr> <tr> <td class="td_left"><label>Gender</label></td> <td class="td_right"> <input type="radio" name="gender" value="male"> male <input type="radio" name="gender" value="female"> female </td> </tr> <tr> <td class="td_left"><label for="birthday">Date of birth</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="Please enter the date of birth"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >Verification Code</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="Please enter the verification code"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_sub" value="register"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>Existing accounts?<a href="#">Login immediately</a></p> </div> </div> </body> </html>
Here are the notes for the form:
* form:
*Concept: used to collect user input data. Used to interact with the server.
*Form: used to define the form. You can define a range that represents the range in which user data is collected
* properties:
*action: specify the URL of the submitted data
*Method: specify the submission method
*Classification: 7 kinds in total, 2 kinds are commonly used
* get:
1. The request parameters will be displayed in the address bar. It will be encapsulated in the request line (explained after HTTP protocol).
2. The request parameter size is limited.
3. Not very safe.
* post:
2. The request parameters will no longer be displayed in the address bar. It will be encapsulated in the request body (explained after HTTP protocol)
2. There is no limit to the size of the request parameter.
3. Relatively safe.
*To submit data in a form item: its name attribute must be specified
*Form item label:
*input: you can change the style of element presentation through the type attribute value
*type attribute:
*Text: text input box, default
*placeholder: Specifies the prompt information of the input box. When the content of the input box changes, the prompt information will be cleared automatically
*Password: password input box
*Radio: radio box
* Note:
1. In order for multiple radio boxes to achieve the effect of radio selection, the name attribute value of multiple radio boxes must be the same.
2. Generally, the value attribute will be provided for each radio box to specify the submitted value after it is selected
3. checked property. Default value can be specified
*checkbox: check box
* Note:
1. Generally, the value attribute will be provided for each radio box to specify the submitted value after it is selected
2. checked property. Default value can be specified
*File: file selection box
*hidden: hidden domain, used to submit some information.
* button:
*submit: submit button. Forms can be submitted
*Button: normal button
*image: picture submit button
*The src property specifies the path of the picture
*label: Specifies the text description of the input item
* Note:
*The for attribute of the label generally corresponds to the id attribute value of the input. If it does, click the label field, and the input input field will get the focus.
*select: drop-down list
*Child element: option, specify list item
*textarea: text field
*cols: specify the number of columns and how many characters are in each row
*Rows: the default number of rows.
