Html forms, div labels, etc...., div ......

Html forms, div labels, etc...., div ......

I. Forms

Function:The form is used to transmit data to the server to realize interaction between the user and the Web server.

A form can contain input series tags, such as text fields, check boxes, single quotes, and submit buttons.

The form can also contain textarea, select, fieldset, and label labels.

Form attributes

Action: Where the form is submitted. generally pointing to a program on the server side, the program receives the data submitted by the form (that is, the form Element value) for the corresponding processing, such as https://www.sogou.com/web

Method: Form submission method. The default value of post/get is get.

Note !!!!

 

From form: enables interaction between users and web servers to be sent in the form of key-value pairs {":" haiyan "," ":" 123 "} if the name attribute is not available, your data does not pass the name: key name request server method: get: The request will be placed behind the url username = yaun & password = 123 post: the request is placed in the Request body. url: https://www.baidu.com (Protocol: domain name (also ip + port) url: http: 127.0.0.1: 8800/blog/addBlog (Protocol: ip: port/) url: http: 127.0.0.1: 8800/blog/addBlog? Username = yuan http: Protocol 127.0.0.1: 8800: IP address and port blog/addBlog: url path (path) username = yuan: get request data request protocol: the browser sends a get request to the server (get request, post request) Format: Request Header of the first line: is a group of key-value pairs line feed \ n, \ n \ r request data: there are two ways if get: url? Data if post: request data get request: poor security, limited data volume (get requests are used when the query is designed) Those are get requests (usually query database operations): 1. url Access server 2. hyperlink access, that is, a tag post request: relative to the get security point, but there is no absolute security (post can be used for modification) corresponding protocol:

Form Element

Basic concepts:
HTML forms are complex parts of HTML elements. They are often combined with scripts, dynamic pages, and data processing functions. Therefore, HTML forms are important for creating dynamic websites.
Forms are generally used to collect user input information.
How the form works:
When you browse a webpage with a form, you can enter the required information and click a button to submit it. The information is transmitted to the server over the Internet.
A special program on the server processes the data. If there is a mistake, the system returns the error message and requires that the error be corrected. When the data is complete, the server returns an input information

<Input> series labels

''' <1> form type: text input box password Input box radio single-member checkbox multiple selection box submit button (need to use with js) button and submit difference? File: To submit a file, add the attribute enctype = "multipart/form-data" to the form. Pay attention to the following: the request method must be postenctype = "multipart/form-data" <2> form attribute name: the Key of the form submission item. note: The name attribute is the name used to communicate with the server, and the id attribute is the name used by the browser. This attribute is mainly used to facilitate client programming, the value used in css and javascript: the value of the Form submission item. for different input types, the usage of the value attribute is also different: type = "button", "reset", "submit"-defines the text type = "text" displayed on the button ", "password", "hidden"-defines the initial value of the input field type = "checkbox", "radio", "image"-defines the value checked associated with the input: radio and checkbox are selected by default readonly: read-only. text and passworddisabled. '''

Select tag

''' <Select> select the label attribute name from the drop-down list: the Key of the Form submission item. size: Number of options. multiple: multiple <optgroup> adds a group to each item. <option> Each attribute selected in the drop-down list: value: the value of the Form submission item. selected: Select ''' by default from the selected drop-down list '''

<Textarea> multi-line text box

''' <Form id = "form1" name = "form1" method = "post" action = ""> <textarea cols = "width" rows = "height" name = "name"> default content </textarea> </form> '''

<Label> label

Definition: <label> label defines the annotation (TAG) for the input element ).
Note:
1. The label element does not show any special effects to users.
2 <label> The for Attribute Value of the label should be the same as the id attribute value of the related element.

''' <Form method = "post" action = ""> <label for ="Username"> User name </label> <input type = "text" name = "username" id ="Username"Size = "20"/> </form> '''

<Fieldset> label

''' <Fieldset> <legend> log on </legend> <input type = "text"> </fieldset> '''

Instance

<! DOCTYPE html> 
2. div and span labels
<Div> </div>: <div> it is only a block-level element and has no practical significance. It mainly uses CSS styles to give it different representations.
<Span> </span>: <span> indicates an inline row (an element in a row), which has no practical significance. It is mainly presented with different expressions through CSS styles.
Differences between block-level elements and intra-row Elements
The so-called block element is the element that starts rendering with another line. The element in the row does not need to start with another line. If these two elements are inserted separately in the webpage, the page will not be affected.
These two elements are created specifically to define CSS styles.
3. Image Tag img
Src: Path of the image to be displayed. alt: prompt when the image is not loaded successfully. title: The prompt message when the mouse is suspended. width: The image width and height: The image height (the width and height attributes use only one to automatically proportional scaling .) '''
4. List tags
<Ul>: unordered list [type attribute: disc (solid dot) (default), circle (hollow circle), square (solid square)] <ol>: ordered list <li>: each item in the list. <dl> definition list <dt> List title <dd> list item '''
Instance:
<! DOCTYPE html> 
Run