HTML Basics 2

Form Label Form

Features: forms are used to transfer data to the server, enabling users to interact with the Web server

The form can contain input series labels such as text fields, checkboxes, radio boxes, submit buttons, and so on.

Forms can also contain textarea, select, FieldSet, and label labels.

Form Properties

Action: Where the form is submitted. Generally point to the server side of a program, the program receives the form submitted by the data (that is, the form element value) for the corresponding processing, such as Https://www.sogou.com/web

Method: How the form is submitted post/get default value is get

Form elements

HTML forms are a more complex part of HTML elements, and forms are often combined with features such as scripting, dynamic pages, and data processing, so it's important to make dynamic Web sites.

Forms are generally used to collect user input information.

Working principle

When a visitor browses a page with a form, they can fill in the necessary information and then press a button to submit it. This information is transmitted over the Internet to the server.

This data is processed by a specialized program on the server and returns an error message if there is an error and requires that the error be corrected. When the data is complete and correct, the server feeds back an input completion information.

Input Series label

#类型text text input box password password input box radio single box checkbox checkboxes submit  submit button buttons            Normal button without any attributes, need to cooperate with JS to use the function file file submission, The form form needs to add the attribute enctype= "Multipart/form-data" to         upload the file Note two points:            1 The request must be the Post            2 enctype= "Multipart/form-data" # Property name    The key of the form submission item.        Note the difference from the id attribute: The name attribute is the one used when communicating with the server,        and the id attribute is the name used by the browser side, which is primarily for client programming, while the value   used in CSS and JavaScript The value of the form submission item. The Value property is used differently for different input types:                type= "button", "Reset", "submit"-defines the displayed text on the button                type= "text", "Password", " Hidden "-Defines the initial value of the input field                type=" checkbox "," Radio "," image "-defines the value associated with the input checked:  Radio and checkbox are selected by default readonly: Read-only . Text and passworddisabled: works well for the input used.

Note: Data interaction with the server, the data is submitted in the form of Key:value, in Python is the dictionary processing, key is the Name property defined, value is a list, the element in the list is the Value property of the form

Example 1:text and password types

<form action= "/index/" method= "POST" >    <p> Name: <input type= "text" name= "user" value= "Wangbadan" > </p>    #value是默认值    <p> users: <input type= "text" placeholder= "user" > </p>   # placeholder for displaying hints, also for password type    <p> password: <input type= "password" name= "password" > </p>     # Password type is encrypted display </form>

Example 2:checkbox multiple marquee and radio radio box

<form action= "/index/" method= "POST" >    #checkbox和radio的关联是通过相同的name键值关联的    <p> Hobbies: <input type= "checkbox" name= "hobby" value= "Chi" > Eat             <input type= "checkbox" name= "Hobby" value= "Piao" checked= "checked" >      #cheched表示默认选中             <input type= "checkbox" name= "hobby" value= "du" > Bet             <input type= "checkbox" Name= "Hobby" value= "he" > Drink    </p>    <p> Gender: <input type= "Radio" name= "Sex" value= "1" checked= " Checked "> Male            <input type=" Radio "name=" Sex "value=" 0 "> Women    </p></form>

Note: check box, select several, add a few elements to the Key:value value list

Example 3:reset reset button, button Normal button, submit submit button, File Upload button

<form action= "/index/" method= "POST" >    <p><input type= "reset" ></p>     #重置当前表单的输入    <p><input type= "button" value= "buttons" ></p>     #普通按钮, no attributes    <p><input type= "Submit" value = "Submit" ></p>     #将当前输入的值提交给action定义的目标    <p><input type= "file" value= "" ></p>      #文件上传标签 </form>

Select drop-down Selection tab

#属性name: The key of the form submission item. Size: Number of options Multiple:multiple           <optgroup> for each item plus grouping           <option> drop-down check each property: value: The value of the form submission item.   Selected:selected drop-Down is selected by default

Example:

<form action= "/index/" method= "POST" >    <p> Native Place        <select name= "Jiguan" size= "1" multiple= " Multiple ">        <!--<select name=" Jiguan "multiple=" multiple ">--> #不限制size最多显示四个            <option Value= "Hebei" > Hebei </option>            <option value= "Henan" > Henan Province </option>            <option value= " Hubei "> Hubei Province </option>            <option value=" Hunan "selected=" selected "> Hunan Province  </option>    # Selected default Check        </select>    </p></form>

TextArea multiple lines of text

<form action= "/index/" method= "POST" >    <p> Introduction: <textarea name= "personal" cols= "10" rows= " Placeholder= "Personal Profile" ></textarea></p></form>

Label label

The <label> tag defines the callout (tag) for the input element, primarily to increase user friendliness.

Description

1 The Label element does not present any special effects to the user.

2 The For property value of the <label> tag should be the same as the id attribute value of the related element.

<form action= "/index/" method= "POST" >    <p> Hobbies:        <input type= "checkbox" name= "hobby" value= "Chi" Id= "Chi" ><label for= "Chi" > Eat </label>        <input type= "checkbox" name= "Hobby" value= "Piao" checked= "Checked" id= "Piao" ><label for= "Piao" > Hookers </label>        <input type= "checkbox" name= "hobby" value= "du "Id=" du "><label for=" du "> Bet </label>        <input type=" checkbox "name=" hobby "value=" he "id=" he "> <label for= "He" > Drink </label>    </p>    <p> Gender:        <input type= "Radio" name= "Sex" value= "1" checked= "Checked" id= "nan" ><label for= "nan" > Male </label>        <input type= "Radio" name= "Sex" value = "0" id= "NV" ><label for= "NV" > Women </label>    </p></form>

FieldSet label

<fieldset>    <legend> Login </legend>    <input type= "text" ></fieldset>

HTML Basics 2