Today I learned the form usage of HB, as well as the audio and video usage. We know the usage of from in HTML.
Use the form tag in html to complete. Form tags are actually a combination of a group of tags, not a single tag.
Form elements are elements that allow users to enter information in forms (such as input boxes, text fields, drop-down lists, radio boxes, check boxes, etc.).
Use < form > in html to define the form:
Common form elements are:
Other tags are often used in form Tags:
Input is mainly used to allow users to enter data labels. The type attribute in the input tag can set the type of data currently entered by the user
type attribute of input tag
type="text" text box, which is mainly used to allow users to enter visible data, the default attribute of input;
type="password" password box is mainly used to allow users to enter invisible data
type="radio" radio button, which is usually selected by the user. Note that the name attribute must be consistent
type="checkbox" check box, users can select multiple conditions
type="file" select a file to upload the local file to the server
type="submit" submit the data in the whole form to the server
type="reset" resets the data in the form to the initial state
type="button" button is a simple button without any click effect
type="image" pictures can be submitted instead of submit
type="hidden" hidden data will not be displayed on the page, but this data will still be submitted to the server when you choose to submit
The < Select > drop-down box needs to be used together with the option tag
< textarea rows = "5" cols = "40" > text area, where rows is used to display the number of rows in the text area and cols is used to display the number of columns in each row in the text area.
input: the user inputs some text information. The default is type="text"
type="password": password box. The entered content is not visible
The type="radio" radio box must give the attribute value of name, and it must be the same,
checked="checked" the effect selected by default
type="checkbox" multiple selection box
Hidden button: hidden button
select: drop-down box, used together with option. selected="selected" is selected by default
textarea: text area
Button: a simple button
Then there is the use of Video Tags and Video Tags
< video SRC = "" controls = "" > < / video > (this is the video tag)
< audio SRC = "song. Mp3" controls = "controls" loop = "loop" (this is the audio tag)
Then today's homework uses the form method to modify the form
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table border="1px" width="800px" height="900px" cellpadding="0px" cellspacing="0px" > <!--name--> <tr align="center"> <th colspan="7">curriculum vitae</th> </tr> <tr align="center"> <!--essential information--> <th>full name</th> <td><input type="text" id="username" name="username" placeholder="Please enter your name"/></td> <th>Gender</th> <td><input type="radio" name="sex" value="male" />male <input type="radio" name="sex" value="female" />female</td> <th>nation</th> <td><select> <option value="Please select">Please select</option> <option value="Chinese">Chinese</option> <option value="Zhuang Nationality">Zhuang Nationality</option> <option value="Tu Nationality">Tu Nationality</option> <option value="the zang or tibetan people">the zang or tibetan people</option> <option value="Manchu">Manchu</option> </td> <th rowspan="4" width="120"><a href="http://bd.maoni521.com/" target="_blank"> <img src="../img/nan.jpg" width="180px" height="200px"/> </a> </th> </tr> <tr align="center"> <!--Date of birth--> <th>date of birth</th> <td><input type="date" /></td> <th>Political outlook</th> <td><select> <option value="Please select">Please select</option> <option value="Masses">Masses</option> <option value="party member">party member</option> <option value="League member">League member</option></td> <th>Native place</th> <td><select> <option value="Please select">Please select</option> <option value="Nanjing">Nanjing</option> <option value="Chongqing">Chongqing</option> <option value="Chengdu">Chengdu</option> <option value="Shanghai">Shanghai</option> <option value="Shenzhen">Shenzhen</option> </select></td> </tr> <tr align="center"> <!--Physical enrollment--> <th>Physical condition</th> <td><select> <option value="Please select">Please select</option> <option value="healthy">healthy</option> <option value="sub-health">sub-health</option> <option value="Thin ">Thin </option> <option value="Overweight">Overweight</option> </td> <th>Height</th> <td><select> <option value="Please select">Please select</option> <option value="180cm">180cm</option> <option value="175cm">175cm</option> <option value="170">170cm</option> <option value="165cm">165cm</option> <option value="165 following">165 following</option> </td> <th>Enrollment category</th> <td><select> <option value="Please select">Please select</option> <option value="comping ">comping </option> <option value="Unified recruitment">Unified recruitment</option> <option value="Non unified recruitment">Non unified recruitment</option> </td> </tr> <tr align="center"> <!--education--> <th>education</th> <td><select> <option value="Please select">Please select</option> <option value="graduate student">graduate student</option> <option value="Doctor">Doctor</option> <option value="undergraduate">undergraduate</option> <option value="junior college">junior college</option> <option value="secondary specialized school">secondary specialized school</option> </td> <th>educational system</th> <td><input type="text" id="username" name="username" placeholder="Please enter your school year"/></td> <th>Department</th> <td><select> <option value="Please select">Please select</option> <option value="electronic information engineering">electronic information engineering</option> <option value="Art design">Art design</option> <option value="architectural engineering">architectural engineering</option> </td> </tr> <tr align="center"> <!--University one is graduated from--> <th>Graduation school</th> <td colspan="3"><select> <option value="Please select">Please select</option> <option value="Tsinghua University">Tsinghua University</option> <option value="Peking University">Peking University</option> <option value="Nanjing University">Nanjing University</option> <option value="Nanjing Medical University">Nanjing Medical University</option> </td> <th>Professional</th> <td colspan="2"><select> <option value="Interior design">Interior design</option> <option value="computer science">computer science</option> <option value="civil engineering">civil engineering</option> <option value="clinical medicine">clinical medicine</option> </td> </tr> <tr align="center"> <!--contact information--> <th>Telephone</th> <td colspan="2"><input type="text" id="username" name="username" placeholder="Please enter your phone number"/></td> <th colspan="2">E-mail address</th> <td colspan="2"><input type="text" id="username" name="username" placeholder="Please enter your email"/> </td> </tr> <tr align="center"> <!--e-mail address--> <th>Contact address</th> <td colspan="6"><input type="text" id="username" name="username" placeholder="Please enter your contact address"/></td> </tr> <tr> <th>Home address</th> <td colspan="6"align="center"> <input type="text" id="username" name="username" placeholder="Please enter your contact address"/></td> </tr> <tr align="center"> <!--hobby--> <th>Hobbies</th> <td colspan="6"><input type="checkbox" name="hobby" value="Wall piercing" />Wall piercing <input type="checkbox" name="hobby" value="Shadow body technique"/>Shadow body technique <input type="checkbox" name="hobby" value="Seventy two changes"/>Seventy two changes <input type="checkbox" name="hobby" value="java"/>java <input type="checkbox" name="hobby" value="Basketball"/>Basketball <input type="checkbox" name="hobby" value="sing"/>sing</td> </tr> <tr align="center"> <!--honor--> <th>Personal rewards</th> <td colspan="6" rowspan="3" ><textarea cols="100px" rows="10px"></textarea> </td> </tr> <tr></tr> <tr></tr> <tr align="center"> <!--Internship--> <th>real<br/> Practice<br /> feeling<br /> condition<br/> </th> <td colspan="6" rowspan="3"><textarea cols="100px" rows="10px"></textarea> </td> </tr> <tr></tr> <tr></tr> <tr align="center"> <!--What skills have you learned--> <th>IT<br/> technique<br /> art<br /> </th> <td colspan="6" rowspan="3"><textarea cols="100px" rows="10px"></textarea> </td> </tr> <tr></tr> <tr></tr> <tr align="center"> <!--Self cognition--> <th>self<br/> evaluate<br /> </th> <td colspan="6" rowspan="3"><textarea cols="100px" rows="4px"></textarea>. </td> </tr> </table> </body> </html>