HTML form, style, html form style

HTML form, style, html form style

 

Directory: 1. <form> 2. 3. <embed>

 

 

 

1. form

Create a form and use the <form> label. Form is used to transmit data to the server for user interaction. A tag contains input, menus, textarea, fieldset, label, and other elements.

1. FormBasicImplementation
When you click the submit button to submit the form, all input information in the form is sent to the action in method. The information in the input is like "host = sunny" and "domain = 51cto ".

<Form action = "action. jsp "method =" GET "> Host name: <br> <input type =" text "name =" host "value =" sunny "> <br> Domain name: <br> <input type = "text" name = "domain" value = "51cto"> <br> <input type = "submit" value = "button"> </form> <p> the form content is submitted to action. jsp processing. </P>

★Action specifies where the form data is sent when a form is submitted.

★Type defines the attributes of input (input box)

★Name of the name Element

★Default value of the value element (the value of the submitted action)

★Method is the submitted method (GET | POST)

With GET, the submitted information is visible in the address bar (such as "action. jsp? Host = sunny & domain = 51cto ");

POST is invisible.

★Form can also have the name and target attributes. The default value of target is _ self or _ blank.

 

Code effect: the default value is displayed directly.

　　　　

To submit a form, all input information in the form is sent to the action in method.

 

1. 2. form elements

Element input has multiple forms based on different types of attributes. Select, option ......

1.2.1. Text and password lines

Type specifies the type of the element. name defines the name of the element.

 

<input type="text" name="username"><input type="password" name="userpass">

 

Size indicates the display width; maxlength indicates the number of characters received

<input type=text name=xxx size=6 maxlength=5>

 

1.2.2. button

A common button with "OK" displayed on the button ".

<Input type = "button" value = "OK">

Click OK. The button displays "Submit for query ". Content of input submitted

<input type="submit">

"Reset" is displayed on the "reset" button ". Clear select in form

<input type="reset">

 

1.2.3. Check box and single answer

The checkbox label is a check box, And the checked label is selected by default. <p> implements line feed. Check box names vary.

<Input type = checkbox name = fruit1 checked> Banana <p> <input type = checkbox name = fruit2> Apple <p> <input type = checkbox name = fruit3 value = Orange> Orange <p>

 

In some cases, it is better to have the same name. As follows, shell indicates that the required skill is selected by default and cannot be canceled. The other two items are optional items.

<input type="checkbox" name=lang value="shell" checked disabled>shell<p><input type="checkbox" name=lang value="python">python<p><input type="checkbox" name=lang value="c">C<p>

 

 

The radio tag is single-threaded. The mutex content name must be consistent to take effect.

<input type=radio name=fruit checked>Banana<p><input type=radio name=fruit>Apple<p><input type=radio name=fruit>Orange<p>

 

1.2.4. Text Box textarea

Warp indicates soft and hard carriage return. By default, You can freely drag the text box size.

<textarea wrap=soft name=comment rows=5 cols=25></textarea><textarea wrap=hard name=comment rows=5 cols=25></textarea>

The line feed is automatically generated by default.

 

1.2.5. select a list box

The list box is defined by the select element. option indicates the list element. Select indicates the default element.

<select name='fruits'>    <option value='1' selected>Apple</option>    <option value='2' >Banana</option>    <option value='3' >Orange</option></select>

 

Change the content of a row to three by default.

<select name=fruits size=3>

Select supports multiple selection and grouping ......

 

1.2.6. Surround box fieldset

A box is formed to enclose elements.

<Form> <fieldset> <legend> logon area </legend> Username: <input type = "text"/> password: <input type = "text"/> </fieldset> </form>

Code effect:

　　

 

1.2.7.hidden attributes

Submit to action for some default attributes

<input type="hidden" name="ie" value="utf-8"><input type="hidden" name="fr" value="so.com"><input type="hidden" name="src" value="home_so.com">

 

1.2.8. Upload file

The input attribute is file. You can upload files.

<form enctype="multipart/form-data">    <input type="file"></form>

 

2.

<Head> A label defines the header of a document. It is a container for all header elements. The document header describes various attributes and information of the document.

2. 1. Document title <title>

Unique element in the header

<title>Readme</title>

 

Important Content outside of technology:

Titles that contain document reference sorting are generally not good titles. For example, titles such as chapter 16th or section 5 are useless for readers to understand their content. A more descriptive title, such as "Chapter 1: HTML title" or "Part 5: how to use a title". Such a title not only expresses its position in a large document set, it also describes the specific content of the document to attract readers to read more.

People often spend a lot of time creating Web documents, but they often waste all these efforts because of an unappealing or meaningless title. When special software that automatically collects links for users becomes more and more popular on the Web, only the webpage title will be inserted into a large Linked database as descriptive words related to the page. Therefore, we cannot emphasize this point: Please carefully select a descriptive, practical title that is independent of the context for each of your documents.

 

2. Document style <style>

<Style> tags are used to define style information for HTML documents. In <style>, you can specify how the document is presented in a browser. The type attribute is required.

<style type="text/css">

 

2.2.1.html:

 
2.2.2. Remove the underline from the <a> label:
<a href="http://sunnybay.blog.51cto.com/2249903/1655207" style="text-decoration:none">blog</a>
 
2.2.3. Define an external style file:
<link rel="stylesheet" type="text/css" href="/css/left.css" >
 
2. 3. Document Style <meta>
<Meta> it is used to provide metadata about the page. The format is expressed as a key-value pair. <Meta> the tag does not have an end tag. The required attribute is content. The content attribute provides the value of a key-value pair, which can be any valid string. The content attribute must always be used with the name or http-equiv attribute.
For example, keywords defines a set of keywords for a document and provides the search engine with the following indexes:

<Meta name = "keywords" content = "server, action, target, Tag, password">
 
Address redirection, jump in 3 seconds, for example:
<meta http-equiv="Refresh" content="3;url=http://sunnybay.blog.51cto.com/2249903/1655207" />
 
Document version, for example:
<meta name="findTom" content="2.6">
 
2. 4. External links of documents <link>
Define the relationship between a document and external resources. The most common purpose (I have never seen any other purposes) is to link "Style Sheets ". The <link> tag in HTML does not have an end tag. Example:
<link rel="stylesheet" type="text/css" href="/css/option.css" >
 
2. 5. Default document path <base>
<Base> the tag specifies the default address or target for all links on the page. Impact: <a>, , <link>, and <form>. <Href> attributes are mandatory and <target> are optional. Specify the reference URLs of all relative links on the page and where to open all links on the page. Example:
 
<base href="http://sunnybay.blog.51cto.com/2249903/d-8" /><base target="_self" />
 
 
2. 6. Define the client script <script>
<Script> An element can contain a script statement or direct to an external script file through the src attribute. Required attribute <type>, indicating the MIME type of the script.
2.6.1. Insert the script into HTML
Used in <body>
<body>    <script type="text/javascript">        document.write("
 
2.6.2. Process browsers that do not support scripts
The code in <noscript> is displayed when it is not supported.
<script type="text/javascript">    document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript>
 
3. <embed>
<Embed> tags are used to define embedded HTML content and support HTML event attributes. For Window events, form Events, keyboard Events, mouse events, and media events ",