HTML Learning Summary 7

1. Use styles to display borders

You can create cascading style sheets (CSS) to display borders, which is the most flexible and consistent approach, and we've learned about style-based paragraph boundaries. We can use the same approach for <table> and <td> markers

　　

You can apply these properties to an entire table (by using the <table> marker or a style rule) or to a separate cell. Also, you can apply these properties individually in the start tag prompt, or you can create a rule in the <style> area to manage all instances of a document, or create a rule in an external style sheet to manage all files that use that style sheet.

2. Set background fill and foreground fill.

Each table, row, and cell has its own separate area and can have their own background

To set the background color for the table, you can use the same Background-color style rules that we used when we set up the document, for example, to set a row with a background color of orange, you can use the following statement

<tr style= "Background-color:orange" >

As with the document background color, the table background can also be a picture. Any part of the table can have the Background-image property set. For example, to set a picture background for a table, you can use the following statement:

<table style= "Background-image:urlf (image/leaf.gif)" >

The foreground part of a background is its text.

3. Change cell padding, spacing, and alignment

(1) Set the cell padding.

To set a fill for an entire table, you can use the CellPadding property in the <table> tag (the CellPadding property has no effect on individual row and cell markers)

<table cellpadding= "4px" >

To set a fill for a separate cell, use the Padding property in the style sheet, for example: <td style= "padding:4px" >

Note: You cannot set a fill on a row because technically, there are no cells in the row that need to be populated.

(2) The default table border looks like a double line, but this effect is actually the effect of a table border and each cell border, and the effect of the double line is caused by the margin between the cells.

If you want to set the border of the solid line between the cells, you can set the cell spacing to zero.

<table cellpadding= "10px" cellspacing= "0px" >

(3) Set horizontal and vertical alignment

There are two alignment methods for the contents of a cell: vertical (top, middle, and bottom) and horizontal (left, middle, right, or similar). To set the alignment using attributes, use the Align property to specify horizontal alignment, and use the Valign property to specify the vertical alignment, as follows:

<TD align= "center" valign= "Middle" >

You can also use the Text-align style to set the horizontal alignment, vertica-align to specify vertical alignment, as follows:

<TD style= "Text-align:center;vertical-align:middle" >

4. Create a user form

The form can be placed anywhere in the subject section of the HTML document, and the table is encapsulated with two <from> tags:

<form method= "POST" >

....

</form>

The method attribute is used to define what can happen when a form is submitted, and almost all forms use the method= "post" attribute, meaning that the user enters the form data to be collected, either by e-mail or directly to the server, where the server-side code obtains the data and performs a Tasks, such as storing data (to a database)

In the starting <form> tag, you can specify an action property, which is usually the e-mail address that the information needs to be routed to, or the address (URL) of the script code that needs to run after the user submits the form.

For example, if you want to send the contents of the form to a CGI script, you can include a URL that points to the corresponding CGI script stored on the server, like this:

<form action= "http://www.contoso.com/cgi-bin/feedback.pl" >

You can create form controls by placing different markers in the start and end <form> tags, which include text boxes, buttons, check boxes, list boxes, lists, and/or command buttons. A command button is a button that performs a function. For example: Submit form or form reset.

5. Create a text box

The most basic control is a text box. There are two types of text boxes: normal text boxes (single lines) and text box areas (multiple lines).

You can use the single-sided <input> marker of the type= "text" property to create a plain text box, as follows: <input type= "Text" >

If you are writing XHTML-compatible code, you must add a space and slash to the end of the single marker, such as: <input type= "text"/>

The controls for each form are unique names and are identified by the Name property. For example, to name a text box firstname, you can do the following:

<input type= "text" name= "FirstName" >

You can also use the Size property to specify the width of the text box, which is 20 pixels in the default width.

<input type= "text" name= "Phone" size= ">"

You can also specify the length of text the user enters into the text box, which is not the same as the size of the text box, and if the specified length is larger than the width of the text box, the text is scrolled horizontally with the user, and when the user enters the maximum number of characters specified, the text no longer accepts more input to use the MaxLength property.

<input type= "text" name= "Phone" size= "maxlength=" >

In HTML5, you can ask the user to have some input fields in the sky before submitting the form (applies only to HTML5 compatible browsers). To make an input field mandatory, you can add the required property as follows:

<input type= "text" name= "Phone" size= "" "Maxlength=" required> "

6. Special input types for e-mail and URLs

HTML5 supports two new types of input inputs to support e-mail addresses and URLs. Use the attribute type type= "email" instead of type= "text" to define the input field used to collect e-mails, if the browser does not support HTML5, this field will use the default text type, so it poses no risk:

<input type= "Email" name= "email-address" >

There is also a specific attribute type for the URL

<input type= "URL" name= "website" >

7. Create a text area

By using the double marker <textarea> to create a multiline text area, you can set the text box to contain several lines of text by adding the property rows, as shown in the following example:

<textarea name= "Comments" rows= "5" ></textarea>

We can also add the Columns property to specify how many characters the width of the text area is (each character represents a column), which is 40 characters by default:

<textarea name= "Comments" rows= "5" cols= "></textarea>"

The Columns property affects only the size of the text box and does not affect the maximum number of characters that can be entered, and you can use the MaxLength property to limit the number of characters a user can enter.

8. Create a Submit button or clear button

The default text on the button is submit, but you can use the Value property to display different text on the press. For example, to use the word Send (send) to appear on the button, you can go to the following attribute of value.

<input type= "Submit" value= "Send" >

You can also use the Reset button in your form to help users clear all areas. Similarly, you can use the Value property to change the text on a button.

Example: <input type= "Reset" value= "Clear" >

9. Create default or placeholder text

By default, both the text box and the text area in the form are blank, and you can choose to place the default or placeholder text in it.

1) The default text is normal text and is submitted along with the form results, just as other users actually enter the input data.

2) The placeholder text is "phantom text." They appear in a text box as a hint, and the user enters additional information in the text box. If the user chooses to keep the text blank, then nothing is committed.

For text boxes, you can define the default text character plus the Value property, as follows:

<input type= "text" name= "Country" value= "all states of America" >

For text areas, you can place the default text between start and end <textarea> as follows:

<textarea name= "Comments" rows= "5" >great job! Keep up the good work.</textarea>

Placeholders are only displayed in browsers that are compatible with HTML5, if you want the placeholder text to add a placeholder property, as follows:

<input type= "text" name= "Country" placeholder= "Enter your country Here" >

10. Create check boxes and select buttons.

(1) for a separate $ two (yes/no) issue, we can use the check box, which can contain multiple check boxes, but each check box needs to be individually determined for the user filling out the form

To create a check box, you need to use the type= "checkbox" attribute of the <input> tag as follows:

<input type= "checkbox" Name= "Repair" >

By default, when the check box is selected, the corresponding value in the form results displays on. For the check box in the previous example, the results are shown as follows:

Repair=on;

We can change the default value by defining the Value property. For example, for a check box, we can return the Yes value as follows:

<input type= "checkbox" Name= "Repair" value= "Yes" >

By default, the check box is not selected, and the user must click the check box to select it. In some cases, however, there may be some benefits in pre-selecting a check. If you do this, you can add a checked= "checked" property after the tag, as follows:

<input type= "checkbox" name= "Newsletter" checked= "Checked" >

(2) Create an option button (also known as a radio button)

To show a set of mutually exclusive options, and if you select an option button, all other option buttons in the same group will be excluded.

To create a set of option buttons, first select a name for the option group. You need to specify the same name for each button individually in the Name property. Use the Value property, which is different for each button in the group, to define the value that the group will return in the form. For example:

<p><input type= "Radio" name= "category" Value= "Gold" checked= "checked" >Gold<br>

<input type= "Radio" name= "Categroy" value= "Silver" >Silver<br>

<input type= "Radio" name= "Categroy" value= "Bronze" >Bronze<p>

When the form results are returned, the set of buttons is like the line face return value:

Category=gold

HTML Learning Summary 7