Forms and forms of HTML

1. Differences Between tables and forms: tables are used for page layouts and to create layout styles for pages. Forms are used to transfer data to obtain information, such as: Input box, radio, multi-Select, drop-down selection box.

2. Table: Table.

A. The basic style is as follows:

　　<table>

<caption> table Test </caption>

<tr>

<TD rowspan= "2" >1</td>

<td>2</td>

</tr>

<table/>

B. Manipulate a column individually, where each col represents a column style, the span default value is 1, and when you set another value, the style of several columns starting from that row.

　　<colgroup>

<!--span default 1-->

    <Col style="background   :  red     " />    <  col style= "background      :  orange     " />    <  col style= "background      :  yellow     "          < Span lang= "en-US" > < Span lang= "en-US" >   span= "2"           < Span lang= "en-US" > /> 
  <  col style=< Span lang= "en-us" > "background      :  green   ;   "  />   
   </  colgroup   >               

C. Basic properties

Colspan: The number of merged columns, the value is numeric, rowspan: The number of merged rows, and the value is numeric.

3. Form: Form

A. Input box, formatted as follows: <input type= "text" value= "TextInput" size= "maxlength=" "placeholder=" Please enter user name/>

Where the type attribute can be: text (text), password (password), button (button), checkbox (multiple selection), Radio (single radio), Reset (reset), submit (Submit), file (upload Document), number (digital) , email (email), url (connection), tel (phone), color (color), date (date), DateTime (Time), datetime-local (local time), etc., where, when the property is radio, You must set the name of the radio option within a group to be consistent, for example: Male <input type= "Radio" name= "Sex"/> Female <input type= "Radio" name= "Sex"/>.

The input tag can use the type= "hidden" property to define the hidden entry field, which is not visible to the user and is typically used to pass parameters.

Value is the value of the text box, size is the length of the input box, and maxlength is the maximum content that the input box can enter. PLACEHOLDER is the hint text in the input box.

B. Set the text box auto-focus and auto-complete fill.

<input type= "text" Autofocus autocomplete= "on"/>

C. DataList label

DataList defines a list of optional data, used in conjunction with the INPUT element, to create a drop-down list of input values. As follows:

<input type= "text" list= "IList"/>

<datalist id= "IList" >

<option lable= "mens" value= "mens" > Mens </option>

<option lable= "Ladies" value= "women" > Women </option>

<option lable= "Children's Wear" value= "Children's Wear" > Children </option>

</datalist>

D. Progress bar

The Min-max represents the range of the progress bar, and step represents the order in which each slide progress bar is added, using the following format:

<input type= "range" min= "0" max= "step=" 2 "/>

E. Drop-down selection tab Select

<select name= "" id= "" Mutiple size= "1" >

<option value= "1" selected> Sichuan </option>

<option value= "2" > Beijing </option>

<option value= "3" > Shanghai </option>

</select>

Where mutiple means multiple selections, size is the length of the drop-down box displayed, and selected is the default selection option when the browser loads.

F. Group label FieldSet

The fieldset tag can combine related elements of a form, generating a set of related form fields that the browser displays in a special way. Its child element legend element defines the caption of the fieldset.

G. text Box textarea

It uses the following methods: <textarea name= "" id= "" cols= "" rows= "></textarea>

Use cols and rows respectively to control the size of the text box.

Forms and forms of HTML