HTML language analysis 8: Form tag

HTML language analysis-8 ▲ Top

8. Form tag

<FORM> <INPUT> INPUT types: Text, Radio, Checkbox, Password, Submit/Reset, Image, File, Hidden, and Button. <SELECT> <OPTION> <TEXTAREA>

■ Introduction

Forms are used in a lot of ways and are everywhere on the Internet. Of course, it is better to use them with CGI, so if you are interested in using or learning CGI, you can see the necessary form design, there are not many tags described in this section, but their parameters have changed a lot. The basic architecture of a FORM is to add one or more FORM input methods and one or more buttons Under the <FORM> tag.

■ <Form> <input>: ▲Top

<FORM> is called a FORM tag. It is used to declare this as a FORM mode and belongs to a container tag, indicating that other FORM tags must be valid only in its surrounding mode. <INPUT> is one of them, the method used to set various input materials. It is an empty tag. <Form> parameter settings (commonly used ): Example: <form action = "http://your.isp.com/cgi-local/example.cgi" method = "Post"> Action = "http://your.isp.com/cgi-local/example.cgi" A form is usually used in combination with CGI. The parameter action is used to specify the location of the CGI program. The information entered in this form can be correctly transmitted to CGI for processing. If no CGI is fed down for testing, you can set this parameter to ACTION = "mailto: your@email.com" so that the information entered in the form will be sent to this email address (in red ). Method = "POST" The method for transmitting data to CGI. The optional values are POST and GET. You only need to remember that POST allows a large amount of data to be transmitted, but GET only accepts less than 1 kb of data, so if you have read the original form code of someone else, you will find that the application form uses POST and the searcher uses GET. <Input> parameter settings (commonly used ): Because the first parameter type has many options, different options indicate different input methods, and other parameters also differ, different input methods and other parameter settings are described as follows. Type = "Text" Optional values: Text, Radio, Checkbox, Password, Submit/Reset, Image, File, Hidden, and Button. Input Method 1: Text (single line Text box) For example, <input type = "text" name = "Age" value = "20" align = "Middle" size = "2" maxlength = "255"> Type = "Text" The input mode is Text. A single line of Text box can be generated, up to 255 characters. Name = "age" This line of text box name is the most important one. It is convenient for CGI to identify the information sent from the form. Although it can be named casually, it is usually specified in CGI programs, if you switch to another name, you need to modify the CGI program. The name can be an English or number without any special characters. If the names are case-insensitive, you can write them as Your_Age, if a visitor fills in 40 in this text box in this form, the string passed to CGI is Your_Age = 40. Value = "20" The value in the text box of this single line. If not entered, the text box is blank. Wait for the visitor to enter the text box. If value = "20", 20 will appear in the text box. Of course, the visitor can modify it. Align = "MIDDLE" Value Options: top, middle, bottom, left, right, texttop, baseline, and absmiddle. Size = "2" The length of the text box displayed in this single line. If Big5 encoding is used, you must be careful. The NC of the text box of the same size is longer than that of IE. Maxlength = "255" The upper limit of characters can be entered in this single-line text box. To facilitate data arrangement or avoid incorrect input, you should set the upper limit. For example, you can set 8 for the input phone number or icq uin, the age is 2. Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "Post"> Enter the phone number: <input type = "text" name = "phone" value = "" size = "10" maxlength = "8"> </Form> Display result Input Method 2: Radio (single choice) Example: <input type = "radio" name = "gender" value = "female" align = "Middle" Checked> Type = "Radio" The input method is Radio, which generates a single choice for clicking. Name = "gender" This Radio name is described in the Text section. Value = "female" Internal value. Each radio must have only one value. Generally, two or more Radio input methods with different values of the same name are used at the same time, so you can choose one of them. Align = "MIDDLE" Optional values: top, middle, bottom, left, right, texttop, baseline, and absmiddle. Checked Set this Radio to set to selected. Only one Radio with the same name can be used, or none of them can be used. Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "Post"> Select gender: <Input type = "radio" name = "gender" value = "female"> female <Input type = "radio" name = "gender" value = "male" Checked> male <Br> do you like it: <Input type = "Radio" name = "like" value = "Yes"> like <Input type = "Radio" name = "like" value = "No"> dislike <Input type = "Radio" name = "like" value = "NotSure"> not sure </Form> Display result Input Method 3: Checkbox (confirmation box) For example: <input type = "checkbox" name = "Idol" value = "Leon" align = "right" Checked> Type = "Checkbox" The input method is Checkbox, which generates a confirmation box for selection. Name = "idol" The name of this Checkbox. For more information, see the Text section. Value = "Leon" Internal value. Each Checkbox must have only one value. When it is deselected, this value will be passed to CGI, for example, the input string idol = Leon. Align = "RIGHT" Optional values: top, middle, bottom, left, right, texttop, baseline, and absmiddle. Checked Set the Checkbox as the selected variable. Each Checkbox is independent, so each one can use this parameter, unlike Radio. Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> You like the following stars: <Br> <input type = "Checkbox" name = "idol01" value = "Leon"> dawn <Input type = "Checkbox" name = "idol02" value = "Noriko_Sagai"> jiujing Method <Input type = "Checkbox" name = "idol03" value = "Leon"> Zheng Xiuwen <Input type = "Checkbox" name = "idol04" value = "BonJovi" checked> BonJovi </Form> Display result Method 4: Password (Password box) Example: <input type = "password" name = "PW" value = "999" align = "Middle" size = "5" maxlength = "9"> Other parameters of Password are the same as those of Text. For more information, see Text. The two have different functions. The characters entered by Password are all expressed. Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> Enter the name: <input type = "Text" name = "name"> <Br> enter the Password: <input type = "Password" name = "pw" maxlength = "9"> </Form> Display result Input Method 5: Submit and Reset) This is an important two buttons on the form. The two parameters are the same, but they are of little use. For example: <input type = "Submit" name = "other_funtion" value = "OK" align = "Middle"> <Input type = "Reset" value = "clear" align = "MIDDLE"> Type = "Submit" Set the input mode to Submit or Reset. Name = "other_funtion" The Submit function varies with the name and must be used with CGI. If you only need a normal transfer key, it is set internally and you do not need to use this parameter. Value = "OK" This value is not lost to CGI, but is displayed on the key. You don't need it. The transfer key's internal value is Submit Query, and the clearing key's internal value is Reset. Align = "MIDDLE" Optional values: top, middle, bottom, left, right, texttop, baseline, and absmiddle. Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> <Input type = "Submit"> <input type = "Reset"> <Br> <input type = "Submit" value = "OK"> <input type = "Reset" value = "clear"> </Form> Display result Input Method 6: Image (Image button) This is usually used to replace the Submit and Reset buttons. Because the buttons generated by the program are not beautiful, this Image parameter allows you to use self-made buttons. For example: <input type = "Image" name = "submit" align = "BOTTOM" src = "ex_icon.gif"> Type = "Image" The input format is Image. Name = "submit" The buttons to be represented can be submit, reset, or others. Align = "BOTTOM" Optional values: top, middle, bottom, left, right, texttop, baseline, and absmiddle. Src = "ex_icon.gif" Click the image source. If the image file is not in the same directory as the html file, add relative or absolute paths. Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> <Input type = "Image" name = "submit" align = "BOTTOM" src = "ex_icon.gif"> </Form> Display result Input Method 7: File Example: <input type = "File" name = "upload" align = "BOTTOM" size = "20" maxlength = "100" accept = "text/html"> Input type = "File" The input format is Image. It is usually used to transmit files. Name = "upload" This file transfer name is used for identification. Align = "BOTTOM" Optional values: top, middle, bottom, left, right, texttop, baseline, and absmiddle. Size = "20" The length of the displayed text box. Maxlength = "100" Maximum number of characters that can be entered. Accept = "text/html" There are 26 types of accepted files, but they are not set. Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> <Type = "File" name = "upload" size = "30" maxlength = "100" accept = "text/html"> </Form> Display result Input Method 8: Hidden For example: <input type = "Hidden" name = "ID" value = "6618"> Type = "Hidden" The input mode is hidden or inner. It does not display any input interface, but an internal value is transmitted along with the form to CGI, such as the membership number generated by CGI, you can also pass in modifiable parameters to adjust CGI to avoid modifying the CGI code. Name = "ID" This file transfer name is used for identification. Value = "6618" The value is passed to CGI in the form of ID = 6618. Example: ("Hidden" is not displayed, so an additional "Submit" Key is placed here, indicating that the fixed value within Hidden will be pushed along with the submit key and passed to CGI) Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> <Input type = "Hidden" name = "ID" value = "6618"> <Input type = "Submit" value = "Submit"> </Form> Display result Input Method 9: Button Example: <input type = "Button" name = "useless" value = "Back"> Type = "Button" The input mode is normal. Java Script is often used as the startup button. Name = "useless" This file transfer name is of little use. Value = "Back" Key display name. Example: Here onclick = "history. go (-1); return true; is a JAVA event. Original code <Form> <Input type = "Button" value = "back to the previous page" onclick = "history. go (-1); return true;"> </Form> Display result

■ <SELECT> <OPTION>: ▲Top

<SELECT> indicates the scroll menu tag. Each OPTION is marked by <OPTION> and can be used as a barrier tag or empty tag. <SELECT> parameter settings (commonly used ): Example: <select name = "where" size = "6" multiple> Name = "where" The name of the scroll menu for identification will be passed to CGI. Size = "6" The number of columns in the scroll menu, that is, the height. Modify the number by yourself. If this parameter is used, no Pop Up effect is available. Multiple This scroll menu allows multiple options. <OPTION> parameter settings (commonly used ): Example: <option value = "tw" selected> Value = "tw" The value of this option will be passed to CGI. You can modify the parameters on your own, but different options must have different values. Selected Set this option to "selected. One single choice scroll menu can only be selected with one or zero options. Example 1: (general pop up scroll menu) Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> Where you com from? <Select name = "where"> <Option value = "hk"> Hong Kong </option> <Option value = "tw" selected> Taiwan </option> <Option value = "cn"> China </option> <Option value = "us"> United States </option> <Option value = "ca"> Canada </option> </Select> </Form> Display result Example 2: (Multiple scroll menus are allowed) Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> Where you com from? <Select name = "where" multiple> <Option value = "hk"> Hong Kong </option> <Option value = "tw" selected> Taiwan </option> <Option value = "cn"> China </option> <Option value = "us"> United States </option> <Option value = "ca"> Canada </option> </Select> </Form> Display result Example 3: (set the Size of the scroll menu) Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> Where you com from? <Select name = "where" size = "5"> <Option value = "hk"> Hong Kong </option> <Option value = "tw" selected> Taiwan </option> <Option value = "cn"> China </option> <Option value = "us"> United States </option> <Option value = "ca"> Canada </option> </Select> </Form> Display result

■ <TEXTAREA>: ▲Top

<Textarea> is a form text block mark. It is often used in bug reports, feedback, and other scenarios that require a large amount of information. <TEXTAREA> parameter settings (commonly used ): Example: <textarea name = "comments" cols = "40" rows = "4" wrap = "VIRTUAL"> Name = "comments" The name of the text block for identification will be passed to CGI. Cols = "40" Modify the width of the text block. Rows = "4" The number of columns in the text block, that is, its height. Modify the number by yourself. Wrap = "virtual" Set the value to off, physical, or virtual. Off indicates that this attribute is not used. When physical is used, the browser forces the web browser to wrap and send data to CGI (Web Server, if it is set to virtual, a continuous string of words is sent (unless the user presses the return/enter on the keyboard ). Example: Original code <Form action = "http://your.isp.com/cgi-local/example.cgi" method = "POST"> Give comments: <Textarea name = "comments" cols = "40" rows = "4" wrap = "VIRTUAL"> This is a preset sentence, which is usually left empty. </Textarea> </Form> Display result