Front-End HTML Summary 3.0—Stop worrying about tables and forms

table

Target:

• understand:
  • Can say what the form is used for
  • The basic structure of the table
• Application:
  • Proficiency in writing tables with n rows and n columns
  • Can easily merge cells

Form role:

To exist is to be reasonable. Table is still a commonly used label, but it is not used for layout. It is most common to display and display tabular data.

Because it allows the data to be displayed very neatly and is very readable.

Especially when displaying data in the background, it is very important whether you are skilled in the use of forms, a clean and simple form can show complicated data in a very organized way, although div layout can also be done, but there is no form that is convenient. .

ps: Use tables in these places, you will feel that life is still so beautiful. . . .

1. Create the table

In HTML pages, to create tables, you need to use table-related tags.

Basic syntax for creating tables:

<table>
  <tr>
    <td>Text in cell</td>
    ...
  </tr>
  ...
</table>

It is necessary to deeply understand the composition of tables, rows, and cells.

The above grammar contains three basic pairs of HTML tags, namely table, tr, and td. They are the basic tags for creating tables. They are indispensable. The following is a detailed explanation of them.

1. table is used to define a table label.

2. The tr tag is used to define the rows in the table and must be nested in the table tag.

3. td is used to define cells in the table and must be nested in tags.

4. The letters td refer to table data, the content of data cells, and now we understand that the most suitable place for tables is to store data.

​

<img src='./media/07table basic structure.jpg'>

Summarize:

• The main purpose of the table is to display special data

• A complete table consists of table labels (table), row labels (tr), cell labels (td), and no column labels

• Only cells of type <td></td> can be nested in <tr></tr>

• tag, he is like a container that can hold all the elements

2. Table properties

There are some attributes of the table that we do not use often. Here we focus on cellspacing and cellpadding.

We often have a saying that the three parameters are 0, and the three parameters we usually develop border cellpadding cellspacing are 0

Case 1:

Name	Gender	Age
Andy Lau	Male	55
Aaron Kwok	Male	52
Jacky Zhang	Male	58
Dawn	Male	18

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr>
   <tr> <td>Andy Lau</td> <td>Male</td> <td>55</td> </tr>
   <tr> <td>Aaron Kwok</td> <td>Male</td> <td>52</td> </tr>
   <tr> <td>Jacky Zhang</td> <td>Male</td> <td>58</td> </tr>
   <tr> <td>Dawn</td> <td>Male</td> <td>18</td> </tr>
</table>

3. Header cell label th

• Function:
  • Generally, the header cell is located in the first row or first column of the table, and the text is bold and centered
• grammar:
  • Simply replace the corresponding cell tag <td></td> with the header tag <th></th>.

Case 2:

​ Rendering

Name	Gender	Phone
Little Wang	Female	110
Xiao Ming	Male	120

​ Code:

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Phone</th>
</tr>
<tr>
<td>Little Wang</td>
<td>Female</td>
<td>110</td>
</tr>
<tr>
<td>Xiao Ming</td>
<td>Male</td>
<td>120</td>
</tr>
</table>

said them in one sentence:

th is also a cell, but it is not the same as a normal td cell, it will center and bold the text in itself

4. Table title caption

Definition and Usage

<table>
   <caption>I am the table title</caption>
</table>

Notice:

1. The caption element defines the table title, which is usually centered and displayed above the table.
2. The caption tag must immediately follow the table tag.
3. This label is only meaningful if it exists in the table. you are the wind I am the sand

5. Merge cells (difficulty)

Merging cells is a commonly used operation, but it is not very complicated to merge.

5.1 2 ways to merge cells

• Merge across rows: rowspan="Number of merged cells"
• Merge across columns: colspan="Number of merged cells"

5.2 Merge cell order

The order of merging we follow the order of first up, then down, first left and then right

5.3 Merge Cell Trilogy

1. First determine whether to merge across rows or columns
2. Find the target cell according to the principle of first, then down, first left and then right, and then write the merge method and the number of cells to be merged. For example:
3. Delete redundant cells Cells

6. Summary table

1. Table provides a way to define tabular data in HTML.
2. The table consists of cells in rows.
3. There are no column elements in the table, the number of columns depends on the number of cells in the row.
4. Tables don't focus on appearance, that's what CSS does.
5. Table learning requirements: Be able to handwrite table structure, and be able to easily merge cells.

Extended reading

Table partition structure (understand)

For more complex tables, the structure of the table is relatively complex, so the table is divided into three parts: header, text and footnotes. And these three parts are marked with: thead, tbody, tfoot, so as to better distinguish the table structure

Notice:

1. <thead></thead>: used to define the header of the table. Used to put titles and things like that. must have tags inside!
2. <tbody></tbody>: used to define the body of the table. Put the data ontology. 3.<tfoot></tfoot> Place footnotes of tables and the like.
3. The above tags are placed in the table tag.

1. List labels (emphasis)

learning target

• understand
  • Application scenarios of unordered lists
  • Application scenarios of custom lists

• application

  • unordered list syntax
  • custom list syntax

• concept:

The container is loaded with a form of text or chart with a consistent structure and style, called a list

• Features:

The biggest feature of the list is that it is neat, tidy, and orderly, similar to a table, but it can be combined with a higher degree of freedom.

1.1 Unordered list ul (emphasis)

There is no order level between the various list items of an unordered list, they are juxtaposed. Its basic syntax is as follows:

    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      ......
    </ul>

• List item 1
• List item 2
• List item 3
......

Notice:

 1. Only <li></li> can be nested in <ul></ul>. It is not allowed to enter other tags or text directly in the <ul></ul> tag.
 2. The space between <li> and </li> is equivalent to a container that can hold all elements.
 3. The unordered list will have its own style attribute, drop that style and let CSS come!

1.2 Ordered list ol (to understand)

An ordered list is a list with an ordered list, and each list item is defined in a certain order. The basic syntax of an ordered list is as follows:

1. List item 1
2. List item 2
3. List item 3
......

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  ......
</ol>

All features are basically the same as ul. But in practice, it is much less used than the unordered list.

1.3 Custom lists (comprehension)

Definition lists are often used to explain and describe terms or nouns without any bullet before the list items of the definition list. Its basic syntax is as follows:

<dl>
  <dt>noun 1</dt>
  <dd>Noun 1 Explanation 1</dd>
  <dd>Noun 1 Explanation 2</dd>
  ...
  <dt>noun 2</dt>
  <dd>Noun 2 Explanation 1</dd>
  <dd>Noun 2 Explanation 2</dd>
  ...
</dl>

noun 1

Noun 1 Explanation 1

Noun 1 Explanation 2

...

noun 2

Noun 2 Explanation 1

Noun 2 Explanation 2

...

2. Form Labels (Master)

Target:

• Can write the most commonly used registration forms
• Can tell the common attributes of the input form

The form in reality is similar to the form we fill in when we go to the bank to apply for a credit card. As shown below

Function:

The purpose of the form is to collect user information.

In our web pages, we also need to interact with users and collect user data, and we also need forms at this time.

In HTML, a complete form usually consists of form controls (also called form elements), prompt information and form fields.

Form Controls:

​ Contains specific form function items, such as single-line text input box, password input box, checkbox, submit button, reset button, etc.

Information:

​ A form usually needs to include some descriptive text to prompt the user to fill in and operate.

Form Fields:

It is equivalent to a container, which is used to hold all form controls and prompt information. It can be used to define the url address of the program used to process the form data, and the method of submitting the data to the server. Without defining form fields, the data in the form cannot be sent to the backend server.

2.1 input control (emphasis)

• grammar:

<input type="Attribute value" value="Hello">`

• input meaning of input
• <input /> tags are single tags
• The type attribute sets different attribute values ​​to specify different control types
• In addition to the type attribute, there are other attributes
• Common properties:

1. type attribute

• This attribute can determine which input form you belong to by changing the value.
• For example, type = 'text' means that the text box can be used as username, nickname, etc.
• For example, type = 'password' means that the content entered by the user in the password box is invisible.

Username: <input type="text" /> Password: <input type="password" />

Username: Password:

2. value attribute value

Username:<input type="text" name="username" value="Please enter username">

• value The default text value. Some forms want to display a few texts by default as soon as the page is opened, which can be set by this value.

3. name attribute

Username: <input type="text" name="username" />

name The name of the form, so that the backend can find the form through the name attribute. There are many forms on the page, and the main function of name is to distinguish different forms.

• The value after the name attribute is defined by ourselves.

• If radio is a group, we must name them the same name so that we can choose one of them

Male Female

<input type="radio" name="sex" />Male
<input type="radio" name="sex" />Female

• The name attribute, we use less now, but it is necessary when we learn ajax and background.

4. checked attribute

• indicates the default selected state. More common with radio buttons and check buttons.

  gender: <input type="radio" name="sex" value="male" checked="checked" />male <input type="radio" name="sex" value="female" />female`

male female

The above one means that the male radio button is selected by default

2.2 label label (understanding)

Target:

The main purpose of the label tag is to improve the user experience. Improve the best service for users.

concept:

The label tag defines a label (label) for the input element.

Function:

Used to bind a form element, when the label label is clicked, the bound form element will get the input focus.

How ​​to bind elements?

1. The first usage is to use the label to directly include the input form.

   <label> Username: <input type="radio" name="usename" value="Please enter username"> </label>``

Suitable for single form selection

1. The second usage of the for attribute specifies which form element the label is bound to.

<label for="sex">Male</label> <input type="radio" name="sex" id="sex">`

said them in one sentence:

When we mouse click on the text in the label label, the cursor will be positioned in the specified form

2.3 textarea control (text area)

• grammar:

<textarea> text content </textarea>`

• Function:

Multi-line text input boxes can be easily created through the textarea control.

cols="Number of characters in each line" rows="Number of lines displayed" We actually don't need to develop

2.4 select drop-down list

Purpose:

If there are multiple options for the user to select, in order to save space, we can use the select control to define a drop-down list.

grammar:

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  ...
</select>

Notice:

1. <select> contains at least one pair of options
2. When you define selected = "selected" in option, the current item is the default selected item.
3. But our actual development will use less

3. form field

• How is the collected user information transmitted to the server?

through form fields

• Purpose:

In HTML, the form tag is used to define form fields to collect and transmit user information, and all content in the form will be submitted to the server.

grammar:

<form action="url address" method="submission method" name="form name">
  Various form controls
</form>

Notice:

Each form should have its own form fields. We are making a page now, and we can't see the effect if we don't write it, but if we learn ajax background interaction later, we must need form fields.

Team engagement

Element Properties

• Use double quote syntax for element attribute values
• Element attribute value can be written on all

recommend:

<input type="text" />
<input type="radio" name="name" checked="checked" />

Not recommended:

<input type=text />
<input type='text' />
<input type="radio" name="name" checked />