Introduction to HTML table and form labels

This article mainly introduces table, form label and form submission method.

Directory

1. <table> Tags: Define table layouts in HTML.

2. <form> Tags: used to create HTML forms.

3. Form submission: Describes the Get, post method.

1. <table> Label 1.1 description

Defines the table layout in HTML.

1.2 Format

<table> <caption></caption> <tr> <th></th></tr> <tbody> <TR&G T;<td></td></tr> <tr><td></td><tr> <tbody></table>

1.3 contained elements

<caption></caption>: Table header information.

<tr></tr>: Define a table row;

<th></th>: Defines a table header, or, in the case of plain text, it is shown in bold style by default.

<tbody></tbody>: It can be understood as the content area of a table, which is used when Chrome and FF browsers dynamically insert rows through the DOM. If you do not do DOM operations, you do not have to add.

<td></td>: Define a cell;

1.4 Properties

Table Properties:

Border: Defines the border width of the table, which defaults to 0, which is no border.

Title: The information that is prompted when the mouse moves over the table.

Th, TD Properties:

Colspan: Represents a horizontal merge cell ()

RowSpan: Represents a vertically merged cell ()

1.5 Example

<table border=0 title= "Test" >    <caption> table title </caption>    <tr>        <th> name </th >        <th> Age </th>    </tr>    <tr>        <td> Zhang San </td>        <td>22 </td>    </tr>    <tr>        <td><input type=text/></td>        <td> <input type=text/></td>    </tr></table>

2. <form> Label 2.1 Description

<form> tags are used to create HTML forms.

A form can contain input elements such as text fields, checkboxes, radio boxes, submit buttons, and so on.

Forms can also contain menus, textarea, fieldset, and label elements.

2.2 Properties

Action {URL}: A URL address that specifies where the form table is to send data.

enctype {string}: Specifies how the form data is encoded before the form data is sent.

The specified values are: application/x-www-form-urlencoded: encodes all characters before sending (default for this mode);

Multipart/form-data: no character encoding. You must use this value when you use a form that contains a file upload control

Method {Get/post}: Specifies how the form is sent to the specified page.

The value specified is: The value that is filled in the Get:form form, appended to the URL specified by the action, and passed as a URL link.

Post:form the values in the form, appended to the HTML headers.

2.3 Example

<form enctype= "Multipart/form-data" action= "Ashx/login.ashx" method= "POST" >    <table>        <tr >            <td><label for= "txtname" > Account:</label></td>            <td><input type= "text" ID = "Txtname" name= "Login_username"/></td>        </tr>        <tr>            <td><label for= " TXTPSWD "> Password:</label></td>            <td><input type=" password "id=" txtpswd "name=" login_pswd "/ ></td>        </tr>        <tr>            <td colspan=2>                <input type= "reset"/>                <input type= "Submit"/>            </td>        </tr>    </table></form>

2.4 Application Scenarios

Forms are primarily used to transfer data to a server, such as a common login and registration page.

3. Form form Submission Method 3.1 Get method 3.1.1 Description

The value that is filled in the form form is appended to the URL specified by the action and is passed as a URL link.

3.1.2 Example

In the form code above, enter the following:

Account: admin

Password: 123456

After clicking submit: URL becomes:

http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456

The style of the variable submission is: The name attribute of the HTML element = the value submitted. Multiple variables, separated by A & symbol.

3.2 Post Mode 3.2.1 Description

The values that are filled in the form form are appended to the HTML headers.

3.2.2 Example

Same as above get method.

Account: admin

Password: 123456

After clicking submit: URL becomes

Http://localhost:4778/ashx/login.ashx

You can see just the URL specified by the action, and the parameter is not appended to the URL.

With the Fiddler software, you can view the HTML header area: There is an object named WEBKITFORMBOUNDARY2T7XMZETMRQEAHNH

View the "Raw" area to see the variables that are submitted

The difference between 3.3 get and post

① data query: For example, when browsing the forum, the URL generally contains the classification, page number, the number of records per page and other information. Get mode, you can see the information you want to query (conditions) at a glance. Post because this information is hidden, it is inconvenient to check the query conditions.

② Sensitive data Submission (security): For a record, make changes, add operations, such as registering users, changing user profile, etc. The Get method attaches to the URL and leaks out sensitive messages. Post mode, can hide the sensitive information.

③ Big Data text delivery: Get is easy to query, but because it is attached to the URL, each browser has a length limit for the URL. The ie:2048 character. Chrome, FF appears to be 8182 characters. Post does not seem to have this limitation.

================================== Series Article ==========================================

This article: Introduction to 1.5 table, form label

Web Development Road Series articles

1.HTML

1.1 HTML page source code layout Introduction

1.2 HTML Base Control Introduction

The difference between 1.3 iframe and frameset

1.4 The difference between name, ID, class

1.5 table, form label introduction, and get and post submission methods

1.6 HTML KBD Keyboard elements

1.7 HTML mouse coordinates and element coordinates

2.CSS Cascading Style Sheets

2.1 CSS selectors and how to refer to each style

2.2 CSS HTML element layout and Display Properties

2.3 CSS Float Float Property

2.4 CSS Position Positioning properties

3.JavaScript Introduction

3.1 JavaScript var keyword, the state of the variable, exception handling, naming specification and other introduction

3.2 JavaScript function functions type

3.3 JavaScript Array Object

3.4 JavaScript Date Object

3.5 JavaScript Math and number objects

3.6 JavaScript String Object

3.7 JavaScript Object Objects

3.8 JavaScript Custom Objects

3.9 JavaScript Object Properties Introduction

3.10 JavaScript Development Specification

4.BOM

4.1 HTML BOM Browser Object

4.2 HTML Gets the height width of the screen, browser, page

4.3 HTML URL Address Resolution

5.DOM

5.1 HTML DOM Introduction

5.2 HTML DOM Object

5.3 An introduction to the HTML event (i) event

5.4 HTML Event (ii) registration and logoff of events

5.5 HTML Event (iii) event flow and event delegation

5.6 HTML Event (quad) analog event operation

6.html5

6.1 HTML5 Introduction

6.2 HTML5 Semantic Element (i) page structure

6.3 HTML5 semantic Element (ii) text content

6.4 HTML5 INPUT Element new features

6.5 HTML5 Progress and meter controls

6.6 HTML5 Sessionstorage Session Store

6.7 HTML5 Localstorage Local Storage

6.8 HTML5 Element Attribute Introduction

7.ExtJS 4.2

7.1 ExtJS 4.2 Introduction

7.2 ExtJS 4.2 First Program

7.3 ExtJS 4.2 Components Introduction

How to find 7.4 ExtJS 4.2 components

7.5 ExtJS 4.2 Business Development (i) Homepage construction

7.6 ExtJS 4.2 Business Development (ii) data presentation and enquiry

7.7 ExtJS 4.2 Business Development (iii) data additions and modifications

7.8 ExtJS 4.2 Grid component cell merging

7.9 ExtJS 4.2 Date Component extension: Add Clear button

7.10 ExtJS 4.2 Rating components

8.CSS 3

8.1 CSS3 Border-radius Border rounded corners

8.2 CSS3 background-image background picture related introduction

　　

It's just a record of what I learned and encountered when I was learning and using Web front-end content.

Reference documents:

1) http://www.w3school.com.cn/

2) "JavaScript authoritative Guide (sixth edition)"

Introduction to HTML table and form labels