1.3.2 HTML basic markup-form and its Control Markup

Form) is used to collect information from user site visitors, and then submit the information to the server for processing. The form can contain various controls that allow users to interact, such as text boxes, list boxes, check boxes, and single-choice buttons. After you input or select data in a form, the data is submitted to the form handler for processing. The use of a form includes two parts: one is the user interface, which provides elements for user input data, and the other is the processing program, which can be a client program and executed in the browser, it can also be a server processing program that processes user-submitted data and returns results. The form definition format is as follows:
<Form definition>
[<Input definition>]
[<Textarea definition>]
[<Select definition>]
[<Botton definition>]
</Form>

(1) form tag
In HTML, forms are defined using FORM tags.
<Form attribute = "value "... Event = "code">
......
</Form>
Form tags have the following attributes:
Name = form Name. After naming a form, you can use the script language to reference or control the form.
Method = Method for transferring form data to the server.
The value is as follows:
Post: Embed form data in an HTTP request
Get: attaches form data to the URL requesting this page
Note: To use the get method, the URL length should be within 8192 characters. If the sent data volume is too large, the data will be truncated, resulting in unexpected or failed processing results. In addition, do not use the get method instead of the post method when sending user names and passwords, credit card numbers, or other confidential information.
Action = the URL of the server program or dynamic webpage that receives the form data.
Target = Target window
The value is as follows:
_ Blank: Open the target document in the Untitled new window.
_ Parent: Open the target document in the parent window of the window showing the current document.
_ Self: Open the target document in the window used to submit the form.
_ Top: Open the target document in the current window to ensure that the target document occupies the entire window.
You can create multiple forms in a webpage. Each form can contain various controls, such as text boxes, single-choice buttons, check boxes, drop-down menus, and buttons. But forms cannot be nested.
Form tags have the following events:
OnSubmit = the event handler called when the form is submitted
OnRest = event handler called when the form is reset

(2) form input control tag
<Input property = value... Event = "code"...>
To allow users to Input data through a form, various Input form controls can be created using the Input tag in the form. The Type attribute of the Form Control is set through the Input tag, including the single-line text box, Password text box, check box, single-choice button, file field, and button.
1) Single Row text box.You can add a single-line text box to the form to obtain the information of a row provided by the site visitor. You can create a single-line text box as follows:
<Input Type = "text" property = "value "... Event = "code"...>
Attribute
Name = the Name of the single-line text box, which can be used to reference the text box control in the script.
Value = text box Value
DefaultValue = the initial value of the text box
Size = number of characters in the text box)
MaxLength = maximum number of characters that can be entered in the text box. The number of characters entered by the user can exceed the width of the text box. In this case, the system displays the characters in scroll mode, but the number of characters entered cannot exceed the maximum number of characters entered.
Form = the Form to be read-only)
Method
Click (): Click the text box
Focus (): Get the Focus
Blur (): lost focus
Select (): Select the content of the text box
Event
OnClick = click the code executed in the text box
OnBlur = code without focus execution
OnChange = Code executed for content change
OnFocus = code that gets the focus execution
OnSelect = select the code for executing the content
For example:
Username: <Input Type = text Name = "nm" Value = "">
2) Password text box.The password text box is also a single-line text box. When a visitor enters data in this box, most Web browsers display passwords with star numbers to prevent others from seeing the entered content. How to Create a Password text box
As follows:
<Input Type = "password" attribute = "value "... Event = "code"...>
The attributes, methods, and events are basically the same as those in the single-line text box. But it does not have an OnClick event.
If the visitor is required to enter the site after entering the password, add the Password text box in the form.
3) Hide the domain.Add a hidden domain site to the form so that visitors cannot see the information of the hidden domain. Each hidden domain must have its own name and value. For example, if many forms use the same Custom Handler, you can use unique names or numbers as the names of hidden fields to differentiate forms. To create a hidden domain, follow these steps:
<Input Type = "hidden" property = "value"…>
Compared with a single-line text box, it does not have the DefaultValue attribute.
When a form is submitted, the name and value of the hidden field are included in the form result together with the name and value of the visible form field.
4) check box.Adding a check box to a form allows visitors to select one or more options or no options. To create a check box, follow these steps:
<Input Type = "checkbox" attribute = "value "... Event = "code"...> Option text
Attribute
Name = check box Name
Value = Value submitted when selected
Checked: This check box is selected when the form is opened for the first time. When this check box is selected, the value is true; otherwise, the value is false. This attribute is optional.
DefaultChecked: determines whether the Checked attribute is defined in the check box. If the Checked attribute is defined, DefaultChecked is true; otherwise, it is false.
Method
Focus (): Get the Focus
Blur (): lost focus
Click (): Click this check box
Event
OnFocus = code that gets the focus execution
OnBlur = code without focus execution
OnClick = click the code executed by the check box
When submitting a form, if the check box is selected, its internal names and values are included in the form results. Otherwise, only the name is included in the form result, and the value is blank.
For example:
Signature pen <Input Type = checkbox Name = "signature" Checked>
Pen <Input Type = checkbox Name = "ch2">
Ballpoint pen <Input Type = checkbox Name = "ch3">
5) Single-choice button.Adding a single-choice button in the form allows site visitors to select one of the options from a group. You can select only one single button at a time. The method for creating a single-choice button is as follows:
<Input Type = "radio" attribute = "value "... Event = "code"...> Option text
Its Attributes are as follows:
Name = Name of a Single-choice button. Multiple Single-choice buttons with the same Name form a control group. Only one option can be selected in this group.
Value = Value at the time of submission
Checked: This option is selected when the form is opened for the first time. This attribute is optional.
The method and event of the single-choice button are basically the same as those of the check box.
When a form is submitted, the name of the single-choice button group and the specified value of the selected single-choice button are included in the form result. If no single-choice button is selected, the group name is included in the form result, and the value is blank.
For example:
<Input Type = radio Checked Name = kd Value = "instructor"> instructor
<Input Type = radio Name = kd Value = "student"> Student
<Input Type = radio Name = kd Value = "Civil Servant"> civil servant
<Input Type = radio Name = kd Value = "doctor"> doctor
6) button.You can add three types of buttons in the form by using the Input Tag: submit button, reset button, and Custom button. The procedure for creating a button is as follows:
<Input Type = "submit | reset | button" property = "value "... OnClick = "code">
Attribute
Type = submit: Create a submit button. After the submit button is added to the form, the site visitor can include the name and value of the submit button when submitting the form) it is transmitted in ASCII text to the form handler specified by the Action attribute of the form. Generally, a form must have a submit button.
Type = reset: Create a reset button. When you click this button, any text that has been entered into the domain is deleted and any selection is cleared. However, if the box contains the default text or options, Click Reset to restore these settings.
Type = button: create a custom button. When adding a Custom button to a form, you must write a script for the button to grant it an operation.
Name = button Name
Value = the title text displayed on the button
Event
OnClick = click to execute the script code

Example 1.6: Create a logon form from 1 to 8, which contains the text box, password box, submit button, and reset button.

Figure 1-8 logon form

Source code, for example, ex1-6.htm ):

<Html> <Head> <Title> Create a logon form </Title> </Head> <Body> <Form> <Table Align = "center" BgColor = "blue" Width = "380"> <Tr BgColor = "# 0034FF"> <Th ColSpan = 2 Align = center> <Font Color = # FFFFFF> logon form </Font> </Th> </Tr> <Tr> <Td> User name: </Td> <Td Width = 240 Height = 50> <Input Type = text Name = uname Size = 20> </Td> </Tr> <Tr> <Td> password: </Td> <Td Width = 240 Height = 50> <Input Type = password Name = ukl Size = 20> </Td> </Tr> <Tr Align = center> <Td Width = 115 Align = right Height = 50> <Input Type = submit Value = "submit" Name = "bok"> </Td> <Td Width = 241 Height = 50> <Input Type = reset Value = "Refill" Name = "bcls"> </Td> </Tr> </Table> </Form> </Body> </Html>

7) file domain.A file FIELD consists of a text box and a "Browse" button. You can enter the file path and file name in the text box, you can also click the Browse button to find and select the desired file from the disk. File fields are generally used to select files. The method for creating a file domain is as follows:
<Input Type = "file" property = "value"…>
Where:
Name = Name of the file domain
Value = initial file name
Size = width of the file name input box

Example 1.7: create a form from 1 to 9, which contains the file field, submit button, and reset button.

Figure 1-9 forms with file Fields

Source code, for example, ex1-7.htm ):

<Html> <Head> <Title> file domain example </Title> </Head> <Body> <Form> <Table Align = center BgColor = # D6D3CE Width = 368> <Tr> <Th ColSpan = 2 BgColor = # 0034FF> <Font Color = # FFFFFF> file domain </Font> </Th> </Tr> <Tr> <Td Height = 52 Align = right> select a file: </Td> <Td Height = 52> <Input Type = file Name = F1 Size = 16> </Td> </Tr> <Tr Align = center> <Td Height = 52 Align = right> <Input Type = submit Value = submit Name = btnSubmit> </Td> <Td Height = 52> <Input Type = reset Value = rewrite all Name = btnReset> </Td> </Tr> </Table> </Form> </Body> </Html>

8) image submission button.The difference between the image submit button and the submit button in the form is that the submit button uses the image instead of the button text title. The image submission button is created using the Input tag as follows:
<Input Type = "image" attribute = "value "... Event = "code "... >
The attributes are as follows:
Src = URL of the image used
Value = provide replacement text for the image
The other button is the same as the submit button.

(3) Other Form Controls
In addition to using the Input tag to create an Input form control, you can also use the Textarea tag to create a multi-row text box, or use the Select tag to create an option menu, you can also use the FieldSet flag to group controls in the form.
1) multi-line text box. Adding a multi-line text box in the form can accept the text entered by site visitors by more than one line. To create a multi-line text box, follow these steps:
<Textarea attribute = "value "... Event = "code"...> Initial value </Textarea>
The attributes are as follows:
Name = Name of the scroll text box Control
Rows = the height of the control in the unit of action)
Cols = the control width in characters)
ReadOnly: the content of the scroll text box is not modified by the user.
When you create a multi-line text box, the text entered between the <Textarea> and </Textarea> labels is used as the initial value of the control. Its other attributes, methods, and related events are basically the same as those in the single-line text box.
When a form is submitted, the domain name and content are included in the form results.
2) option menu. The option menu in the form allows site visitors to select options from the list or menu. You can select one or more options in the menu. The options menu can be created as follows:
<Select Name = "value" Size = "value" [Multiple]>
<Option [Selected] Value = "Value"> Option 1 </Option>
<Option [Selected] Value = "Value"> Option 2 </Option>
......
</Select>
Where:
Name = Name of the option menu control
Size = the number of options displayed once in the list is 1 by default)
Multiple: Multiple options are allowed.
Selected = the initial status of this option is Selected
When a form is submitted, the menu name is included in the form result, and there is a list of all options.
For example:
<Select Name = "Course">
<Option Value = "Computer Basics" Selected> Computer Basics </Option>
<Option Value = "C language programming"> C language programming </Option>
<Option Value = "Data Structure"> Data Structure </Option>
<Option Value = "database principles"> database principles </Option>
<Option Value = "C ++ programming"> C ++ programming </Option>
</Select>
3) group form controls. You can use the FieldSet flag to group form controls, so that the forms can be subdivided into smaller and easier to manage parts. The FieldSet flag must start with the Legend mark and specify the control group title. After the Legend mark, it can be associated with other form controls or nested FieldSet. You can create a form control group as follows:
<FieldSet>
<Legend> control group title </Legend>
Form Control in group
</FieldSet>

BibliographyPrevious sectionNext section