Web Front End "second article" HTML Foundation II (form, DIV)

One, 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

Note!!!

From form: The user interacts with the Web server in the form of a key-value pair. {"": "Haiyan", "": "123"} If you do not have the name attribute, your data is not past the name: The key name requests the server-side way:    get: The request is placed behind the URL Username=yaun&password =123    post: The request is placed in the request body    about the content of the URL        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 with Port    blog/addblog:url path (path)    username = Yuan: Get Request Data Request protocol:    browser to the server (GET request, POST request)    format:        request first line        request header: is a set of group key value pairs        line \n,\n\r        request data: There are two ways        if get:            url?data        if post:            request data                    GET request: poor security, limited amount of data (GET request is used when designing to query)        Those are get requests (which are typically query database operations):            1.url access server side            2. Hyperlink access, a tag        POST request: Relative to get security point, but no absolute security (revision can be used post)        corresponding Agreement:

Form elements

Basic concepts:
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 typically used to collect user input information
How the form works:
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 Labels

' <1> form type: text        input box             password password input box             radio single box             checkbox multiple Box               submit button                         button (need to cooperate with JS use.) What is the difference between button and submit?             file submission: Form form needs to add attribute enctype= "multipart/form-data"                         upload file Note Two: The request must be postenctype= "Multipart/form-data" <2> Form Properties 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, and 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.

Select Label

' <select> drop-down tab Property          name: The key of the form submission item.          Size: Number          of options Multiple:multiple                  <optgroup> for each item plus group                 <option> drop-down check each property:                       value: The values of the form submission item.                          Selected:selected dropdown selected by default "'

<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> tags

Define the:<label> label to define the callout (tag) for the INPUT element.
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 method=" post "action=" ">        <label for=" username "> User name </label>        <input Type= "text" name= "username" id=size= "/></form>"

<fieldset> tags

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

Instance

<! DOCTYPE html>
2.div and Span labels
<div></div>: <div> is just a block-level element that has no practical meaning. It is mainly given a different performance by CSS styles.
<span></span>: <span> represents inline rows (inline elements) and has no practical meaning, and is mainly given a different representation by CSS styles.
The difference between a block-level element and an in-line element
The so-called block element is the element that begins to render on another line, and the inline element does not need another line. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.
3. Picture tag img
SRC: The path of the picture to display. alt: The picture does not prompt when it is loaded successfully. Title: Tip Information when hovering the mouse. Width: The height of the picture height: The picture is high (width height two attributes only one will be automatically equal to zoom.)
4. List label
<UL>: Unordered list [type attribute: disc (solid dot) (default), Circle (empty circle), square (solid square)]<ol>: Sequence table         <li>: Each item in the list. <dl >  Define list         <dt> list title         <dd> list item '
Instance:
 <! DOCTYPE html>
Run
Web Front End "second article" HTML Foundation II (form, DIV)