Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use web tables and forms". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use web tables and forms.

What is a form?

Tables are defined by tags

Each table consists of several rows (defined by the tr tag)

Each row is divided into several cells (defined by the td tag)

The label td refers to table data and data cell contents

Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, etc.

The header of the table uses the definition.

Table structure Document header 1 header 2 header 3 form 1 form 2 form 3 Form 1 form 2 form 3 form 2 form 3

Table Properti

Cell border

The cell margin, which refers to the distance between the text in the cell and the border

Table display mode

Table width

Form label

The label defines the header of the table. This tag is used to combine the header contents of the HTML table.

Label form body (body). This tag is used to combine the body content of the HTML table.

The tag defines the footer (footnote or table note) of the table. This tag is used to combine the contents of the table notes in the HTML table.

The tfoot element should be used in conjunction with the thead and tbody elements.

If you use the thead, tfoot, and tbody elements, you must use all the elements. These tags must be used inside the table element.

By default, these elements do not affect the layout of the table. However, you can use CSS to make these elements change the appearance of the table.

Tags define rows in the HTML table. The tr element contains one or more th or td elements.

Tags define standard cells in an HTML table.

The HTML table has two types of cells:

Header unit-contains header information (created by the th element)

Standard unit-contains data (created by the td element)

The text in the td element is generally displayed in a normal font and left-aligned

The table spans 2 columns and the table spans 2 rows

Empty cell. A table cell that has no content in some browsers may not display its border, so you can add a space placeholder to the table cell for the empty cell to display the border.

Case 1:

Form

Each table starts with a table tag.

Each table row starts with the tr tag.

Each table data starts with a td tag.

One column: 100 rows, three columns: 100 200 300, two rows, three columns: 100 200 300 400 500 600

Case 2:

How to use the "align" attribute to arrange the contents of a cell in order to create a beautiful table consumption item. January and February total $1001.50 $744.65 clothes $241.10 $50.20 Cosmetics $30.00 $44.45 Food $730.40 $650.00

HTML form

The concept and function of forms in Web web pages.

Form structure syntax and attribute syntax.

Form element tag syntax and attribute syntax.

Domain and domain title tag syntax.

Comprehensively use forms and form elements to design web pages.

The purpose of the form

Form is the main bridge of information exchange between Web server and client.

The Web server completes the collection of user information through Web pages containing form and table controls.

A form has 12 commonly used form controls

Input box:

Single-line text input box

Password input box

Multiline text input box

Check box

Radio button

Button:

Ordinary button

Submit button

Reset button

Image button

File selection box

Hide the box

Drop-down list box

Form Overview

Form is a more complex HTML element, which is often used in combination with scripts, dynamic web pages, background data processing, etc., and is a necessary element for designing dynamic web pages.

Use the form to insert some form controls (elements) in the HTML page, such as text box, submit button, reset button, radio button, check box, drop-down list, etc., to complete the collection of all kinds of information.

Case study:

An example of the use of the form is to enter the course score name: higher Mathematics: college Physics:

Form tag

Name: name the form, which can be controlled by a scripting language such as JavaScript.

Action: specifies the application that processes the form information on the server side.

Method: specifies the form "method for handling form data", the value of method (get, post, default get). If the message requires high density and long length, you should use post.

Enctype:enctype is encodetype, that is, the encoding type. It specifies whether the form data is encoded before it is sent to the server. There are three values, which are as follows:

The value describes that application/x-www-from-urlencoded encodes all characters before sending (default). This method can only upload text messages, not files. Multipart/form-data does not encode characters. You must use this value when using a form that contains file upload controls. That is, this method is used when the form data has both text and binary. Text/plain spaces are converted to a "+" sign, but special characters are not encoded. HTML Form attribute

The HTMl element, which has set the appearance of all possible attributes:

. Form elements.

List of attributes

Property describes the character set that accept-charset sets to use in the submitted form (default: page character set). Action sets the address (URL) of the submission page where the form is submitted. Autocomplete sets whether the browser automatically completes the form (default: open). Enctype sets the encoding of the submitted data (default: url-encoded). Method sets the HTTP method used when submitting the form (default: GET). Name sets the name of the recognition form (use document.forms.name for DOM). Novalidate sets the browser not to validate the form. Target sets the destination of the address in the action property (default: _ self).

Action attribute

The action property defines the action to be performed when the form is submitted.

A common practice for submitting a form to the server is to use the submit button.

The general form is submitted to the application on the web server.

If you omit the action property, action is set to the current page.

Method attribute

When to use GET?

When to use POST?

GET is the default submission method. GET is recommended if the form submission is passive and there is no sensitive information.

When using GET, the form data is visible in the page address bar.

Note: GET is most suitable for the submission of a small amount of data, and the browser will set a capacity limit.

Action_page.php?firstname=Mickey&lastname=Mouse

If the form is updating data or contains sensitive information (such as passwords).

POST is more secure because the data submitted in the page address bar is not visible.

The method attribute specifies the HTTP method (GET or POST) to use when submitting the form:

Name attribute

To submit the form correctly, each input field must have a name property set.

Case study:

HTML form First name:

Last name:

If you click submit, the form data will be sent to a page named demo_form.asp.

First name will not be submitted because this input element does not have a name attribute.

Using combined form data

Elements combine the relevant data in the form.

Element defines a title for the element.

Case study:

Definition field and domain title instance basic information name: gender: other information height: weight:

Define fields and domain titles

Field tags allow you to group related elements within a form.

When a set of form elements are placed inside a fieldset tag, the browser displays them in a special way. They may have special boundaries, 3D effects, or you can create a subform to handle these elements.

The tag defines the domain title.

Note: the value property has no default value. If it is not set, it will be displayed as a blank button. You can change it to set the text on the button. The normal button needs to set the onclick property value binding event. Case study: application of ```html buttons input {width: 100px; height: 25px;} body {text-align: center } fieldset {width: 400px; height: 180px } for the application of the three buttons, please enter user information: user name: password:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.