24. The front-end HTML form

1. List label

　　1.1 unordered Table <ul>, each layer is <li>

<ul>         <li> Zhang San </li>             <li> John Doe </li>             <li> Harry </li>    </ul>

Note: Li cannot exist alone and must be wrapped in UL

Related properties in UL: type="属性值" . Property values can be selected: disc (solid origin, default), square (solid square point), circle (Hollow circle).

　　1.2 Sequential table <ol>, each of which is <li>

<ol>           <li> Hey, </li>       <li> hum, </li> <li>        huh </li></ol>

Note: The numbers are sorted according to the Arabic numerals.

UL related properties: type="属性值" . The property values can be: 1 (Arabic numerals, default), A, a, I, I. A combination of start attribute representations 从几开始 .

　　1.3 definition list <dl>, DL sub-elements can only be DT and DD, can not be the other Focus

• <dt>: The title of the definition title list, this tag is required
• <dd>: The list item of the definition description list, if it is not needed, can be added without

<dl><dt> Title Header 1</dt><dd> List item 1</dd><dd> list item 1</dd><dt> header 2</dt> <dd> list item 2</dd><dd> list item 2</dd></dl>

　　

NOTE: DT, DD are container-level labels, want to put anything can

2. Table Labels

In <table>, a table is made up of <table> each row <tr> , and each row is made up <td> of.

Table Properties:

border: Border. The pixel is the unit. Style="Border-collapse:collapse;": The line of the cell and the border line of the table are merged with width: wide. The pixel is the unit. Height: High. The pixel is the unit. BorderColor: The border color of the table. Align: horizontal alignment of the table. The property value can be filled in: Left Right center. Note: This is not the way to set the alignment of the contents of the table, if you want to set the alignment of the content, the cell label<td>set) cellpadding: The distance, in pixels, of the cell contents to the edge. By default, the text is next to the line on the left, that is, by default, the value is 0. Note that it is not the distance from the cell contents to the four side, but the distance to one side, and the default is the distance from the left line. If you set the property dir="RTL", that means the distance from the content to the right line. CellSpacing: The distance (margin) between the cell and the cell, in pixels. By default, the value is 0bgcolor="#99cc66": The background color of the table. Background="path src/...": Background image. The background picture has a higher priority than the background color. 

View Code

<tr> Line Properties:

dir: Public property that sets the arrangement of the contents of this row of cells. Available values: Ltr: Left-to-right, default, RTL: Right-to-left bgcolor: Sets the background color of the cell for this row. Note: There is no background property, that is: Cannot set the background picture of this line, if not to set, can be implemented with CSS. Height align="center": The contents of a row are centered horizontally, and the values are: left, center, rightvalign= " Center ": The contents of a row are centered vertically, with values: Top, middle, bottom

View Code

<td> Cell Properties:

align: The horizontal alignment of the content. The property value can be filled in: Left Right center. If you want the contents of each cell to be centered, this property is too cumbersome to be solved later with CSS. valign: The vertical alignment of the content. The property value can be filled: top middle Bottomwidth: absolute value or relative (%) Height: cell altitude bgcolor: Sets the background color of this cell. Background: Sets the background image for this cell. 

View Code

Cell Merging:

• colspan: Horizontal merge. For example colspan="2" , the position of the current cell that occupies two cells in a horizontal direction.
• rowspan: Merge vertically. For example rowspan="2" , indicates that the current cell is in the vertical direction

Caption: Table title. When used in parallel with the TR label

Cases:

　　

Labels, labels, labels for tables <thead> <tbody> <tfoot>

These three tags have the same difference as no other:

• 1, if written, then the three parts of the code order can be arbitrary , the browser display or in accordance with the THEAD, tbody, tfoot order in turn to display the content. If you do not write Thead, tbody, TFOOT, then the browser parses and displays the contents of the table from the top to bottom of the code in order to display.
• 2, when the table is very large content, if you use THEAD, tbody, TFOOT tags, then the data can be obtained side display . If you do not write, you must wait for the contents of the table to be fully completed from the server to be displayed.

3. Forms tab

Features: Forms <form> enables users to interact with Web servers by transferring data to the server

Plain English out is to collect user information, is to let users fill in, select the

　　<form> Properties

Name : The names of the forms to use when using JS to manipulate or control the form; ID: the name of the form used for JS to manipulate or control the form; action: A handler that specifies the form data, typically PHP, such as the action="login.php" method: The way the form data is submitted, the general value: Get (default) and the Postform tag inside the Action property and the method property, in the following course to explain. Say it a little bit: the Action property is the representation of where the form will be submitted. The method property indicates what HTTP method is used to commit, there are get, post two kinds. The difference between get and post commits: Get mode: The form data to"Name=value"Form appended to the handler specified by the action, using the"?"Separated, each form of the"Name=value"Room with"&"separated by the number. Features: only suitable for submitting small amounts of information, and not too secure (do not submit sensitive data), the data type submitted is limited to ASCII characters. Post mode: Sends the form data directly (hidden) to the handler specified by the action. The data sent by post is not visible. The handler specified by the action can get to the form data. Features: Can submit a large amount of information, relatively safe, submitted data format is diverse (Word, Excel, RAR, IMG). 

View Code

　　<input> Input Tags: for receiving user input

<input type="text" />

<input> Tag Properties:

　　　　type="属性值": Text type. The property values can be:

• textDefault
• password: Password type
• radio: Radio button, the same name as a group of buttons as a single radio (radio button, is not inherently mutually exclusive, if you want to mutually exclusive, you must have the same name property. Name is "name".
  ）。 Very much like the previous radio, press down a button, the others are lifted up. So it's called radio.
• checkbox: Multi-select button, with the same name as a set of buttons to choose.
• checked: The radio button or the multi-select button is selected by default. <input> type="radio" This property can be used when the label is available. The attribute value is also checked, which can be omitted.
• hidden: Hide boxes that contain information that you do not want users to see in the form
• button: Normal button, combined with JS code for use.
• submit: Submit button to transfer data from the current form to the server or other program processing. This button does not need to write value automatically there will be "submit" text. This button really has the submit function. When the button is clicked, the form is submitted to the page specified in the Action property of the form tag.
• reset: Reset button to empty the contents of the current form and set it to the original default value
• image: The picture button is exactly the same as the Submit button, except that the picture button can display the picture.
• file: File selection box.
  Tip: If you want to limit the type of uploaded files, you need to match JS to achieve validation. Security checks on uploaded files: one is the check of the extension, and the other is the contents of the file data.

　　　　value="内容": The default content in the text box (already filled out)

　　　　size="50": Indicates that 50 characters can be displayed within a text box. An English or a Chinese is counted as one character.
Note The units of the Size property value are not pixel-oh .

　　　　readonly: The text box is read-only and cannot be edited. Because its property value is also ReadOnly, the property value can be not written.
After using this attribute, in Google Chrome, the light punctuation is not in, in IE, the cursor can be click in, but the text cannot be edited.

　　　　disabled: text box is read only, cannot be edited, light punctuation does not go in. Property values can be not written.

　　　placeholder: text box Bottom default text, the most common one, play the role of prompting

Cases:

　　<select> drop-down list tags:

　　<select>Each item in the label is <option> expressed in. Select is "choose", Option "options".

The Select label is the same as the UL, OL, DL, which are all group labels.

　　<select>Properties of the Label:

• multiple: You can select multiple options in the drop-down list. No attribute value.
• size="3": If the property value is greater than 1, the list is a scrolling view. The default property value is 1, which is the drop-down view.

　　<option>Properties of the Label:

• selected: In preselection. No attribute value.

Cases:

<form> <select> <option> Primary </option> <option> Junior </option> <option> High School </option> <option> University </option> <option selected=""> Graduate </option> </select> <br><br><br> <select size="3"> <option> primary </option> <option> Junior </option> <option> High School <        /option> <option> University </option> <option> graduate students </option> </select> <br><br><br> <select multiple=""> <option> primary </option> <option> Junior </option> <option selected=""> High School </option> <option selected=""> University </option> <option> graduate students </option> </select> &LT;BR&GT;&LT;BR&GT;&LT;BR > </form>

Effect:

　　<textare> Tags: multi-line text input box

Text is the literal, and area is the region.

Related properties:

• value: The value that is submitted to the server.
• rows="4": Specifies the number of lines in the text area.
• cols="20": Specifies the number of columns for the text area.
• readonly: Read-only.

Cases:

　　<label> tags

24. The front-end HTML form