HTML form_PowerNode Java Academy

1. Form

1. The role of the form

HTML forms are used to receive different types of user input and transmit data to the server when the user submits the form, thereby realizing interaction between the user and the Web server.

2. How the form works

3. Form definition (<form></form> tags)

An HTML form is an area that contains form elements. Forms are created using the <form> tag. A form can contain input elements such as text fields, checkboxes, radio buttons, submit buttons, and so on. Forms can also contain menus, textarea, fieldset, legend, and label elements. Note that the <form> element is a block-level element, and line breaks will occur before and after it.

     <form action="login.do" method="post">
     <!--Form elements go here-->
     </form>

4. Form properties

action: Specifies where to send the form data when the form is submitted. The action value is: first, a URL (absolute URL/relative URL), which generally points to a program on the server side. The program receives the data submitted by the form (that is, the form element value) and processes it accordingly. For example, <form action="http://www.XXX.com/login.do">, when the user submits this form, the server will execute the general processing program named "login.do" on the URL "http://www.XXX.com/". Second, use the mailto protocol URL address, which will send the form content as an email. This is a relatively rare situation as it requires that the visitor has an email sending program installed and correctly configured on their computer. Third, empty value. If action is empty or not written, it means submitting to the current page.

method: This attribute defines how the browser submits the data in the form to the server handler. Regarding the value of method, the most commonly used ones are get and post. First, when using the get method to submit form data, the web browser will attach each form field element and its data in the URL parameter format to the URL address specified by the action attribute of the <form> tag and send it to the web server; due to the length limit of the URL, the amount of data transmitted using the get method is generally limited to less than 1KB. Second, using the post method, the browser will send the form data to the server as part of the HTTP request body. Generally speaking, the amount of data transmitted using the post method is larger than that transmitted using the get method. According to the HTML standard, if the server program that processes the form will not change the data stored on the server, the get method should be used (such as query). If the result of form processing will cause changes to the data stored on the server, the post method should be used (such as add, delete, and modify operations). Third, other methods (Head, PUT, DELETE, TRACE or OPTIONS, etc.). In fact, the original HTTP standard specified corresponding methods for various operations, but later many of them were not followed, and in most cases just using get or post was OK.

target: This attribute specifies where to display the results returned by the URL specified in the action attribute. The values ​​are _blank (open in a new window), _self (open in the same frame, the default), _parent (open in the parent frame), _top (open in the entire window), and framename (open in the specified frame).

title: Sets the text that the browser displays with a small float when the website visitor places the mouse anywhere on the form.

enctype: Specifies how the form data should be encoded before being sent to the server. Value: The default value is "application/x-www-form-urlencoded". All characters will be encoded before being sent to the server (spaces are converted to "+" plus signs, and special symbols are converted to ASCII HEX values); "multipart/form-data": characters are not encoded. This value is required when using a form that contains a file upload control.

name: The name of the form. Note the difference between the name attribute and the id attribute: the name attribute is the name used when communicating with the server; the id attribute is the name used by the browser. This attribute is mainly used in CSS and JavaScript to facilitate client programming.

2. Form Elements

1. Single-line text box <input type="text"/> (the default value of the input type attribute is "text")

<input type = "text" name = "Name"/>

The following are the main properties of a single-line text box:

1. size: Specifies the width of the text box in characters; in most browsers, the default width of the text box is 20 characters.
2. value: Specifies the default value of the text box, which is the value displayed in the text box when the browser displays the form for the first time or the user clicks the <input type="reset"/> button.
3. maxlength: Specifies the maximum character length of user input.
4. readonly: Read-only attribute. When the readonly attribute is set, the text box can get the focus, but the user cannot change the value in the text box.
5. disabled: Disabled. When the text box is disabled, it cannot get the focus. Of course, the user cannot change the value of the text box. And when the form is submitted, the browser does not send the value of the text box to the server.

2. Password box <input type="password"/>

<input type="password" name="name"/>

3. Radio button <input type="radio"/>

How to use: Use a group of radio buttons with the same name, and set different values ​​for different radio buttons. In this way, you can know who is selected by taking the value of the specified name without having to make individual judgments. The element value of a radio button is explicitly set by the value attribute. When the form is submitted, the value and name of the selected item are packaged and sent without explicitly setting the value.

    <input type="radio" name="gender" value="male"/> 
    <input type="radio" name="gender" value="female"/>

4. Checkbox <input type="checkbox"/>

Use a check button group, that is, a group of check buttons with the same name. The element value of the check button form element is explicitly set by the value attribute. When the expression is submitted, the value and name of all selected items are packaged and sent without explicitly setting the value. The checked attribute of a checkbox indicates whether it is selected. <input type="checkbox" checked /> or <input type="checkbox" checked="checked" /> (recommended) Attributes with an optional value such as checked and readonly can omit the attribute value.

     <input type="checkbox" name="language" value="Java"/> 
     <input type="checkbox" name="language" value="C"/>
     <input type="checkbox" name="language" value="C#"/>

5. Hidden field <input type="hidden"/>

Hidden fields are often used to submit information to the server that does not need to be displayed to the user.

<input type="hidden" name="Hidden field"/>

6. File upload <input type="file"/>

If file is used, the enctype of the form must be set to multipart/form-data and the method attribute must be POST.

<input name="uploadedFile" id="uploadedFile" type="file" size="60" accept="text/*"/>

7. Drop-down box <select> tag

The <select> tag creates a list box, and the <option> tag creates a list item. <select> is used together with nested <option> to provide a way to select from a set of options.

Set an option to selected: <option selected>Beijing</option> or <option selected="selected">Beijing</option> (recommended method) to set this item as a selected item. How to achieve "not selected"? Add an <option value="-1">--not selected--<option>, and then programmatically determine the selected value. If it is -1, it is considered not selected.

Select the grouping option. You can use optgroup to group the data. The group itself will not be selected. This applies to both drop-down lists and list boxes.

The <select> tag plus the multiple attribute allows multiple selections (press the CTRL key to select)

    <select name="country" size="10">
          <optgroup label="Africa">
              <option value="gam">Gambia</option>
              <option value="mad">Madagascar</option>
              <option value="nam">Namibia</option>
          </optgroup>
          <optgroup label="Europe">
              <option value="fra">France</option>
              <option value="rus">Russia</option>
             <option value="uk">UK</option>
         </optgroup>
         <optgroup label="North America">
             <option value="can">Canada</option>
             <option value="mex">Mexico</option>
             <option value="usa">USA</option>
         </optgroup>
     </select>

8. Multi-line text <textarea></textarea>

Multi-line text <textarea> creates a text box where you can enter multiple lines of text. <textarea> has no value attribute, <textarea>text</textarea>, cols="50", rows="15" attributes indicate the number of rows and columns. If not specified, the browser will use the default display.

    <textarea name="textareaContent" rows="20" cols="50" >
             The initial display content of the multi-line text box</textarea> 

9. <label></label> tag

You can write ordinary text before <input type="text"> to decorate it, but the input will not get the focus when you click the decorated text, but you can use label. The for attribute specifies the id of the control to be decorated, <label for="txt1">content</label>;", then press alt+u (to understand). accesskey="u", another attribute of label. Note: set a unique id for the decorated control. I think the <label></label> tag is very useful for the two tags <input type="radio"/> and <input type="checkbox"/>.

   <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">Male</lable>
   <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">Female</label>
   <input type="radio" name="sex" id="secret" value="2" /><label for="secret">Confidential</label>

10. <fieldset></fieldset> tag

The fieldset tag divides the control into an area, making it look more neat.

 <fieldset>
    <legend>Hobbies</legend>
     <input type="checkbox" value="basketball" />
     <input type="checkbox" value="Mountain climbing" />
     <input type="checkbox" value="Read" />
 </fieldset>

11. Submit button <input type="submit"/>

When the user clicks the submit button of <inputt type="submit"/>, the form data is submitted to the server handler specified by the action attribute of the <form> tag. The default button text in Chinese IE is "Submit Query". You can set the value attribute to modify the display text of the button.

<input type="submit" value="Submit"/>

12. Reset button <input type="reset"/>

When the user clicks the <input type="reset"/> button, the values ​​in the form are reset to their initial values. When the user submits the form, the reset button's name and value are not submitted to the server.

<input type="reset" value="Reset button"/>

13. Normal button <input type="button"/>

A normal button is usually used to execute a script code when clicked.

<input type="button" value="Normal button"/>

14. Image Button <input type="image"/>

The src attribute of an image button specifies the image source file, and it has no value attribute. Image buttons can replace <input type="submit"/>, and now you can also set the appearance of the <input type="submit"/> button to an image directly through CSS.

  <input type="image" src="bg.jpg" />

3. Form Example

This example is a simple registration page implemented using a form, using a table layout.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN" "http://wwwworg/TR/html4/loosedtd">
   <html>
   <head>
       <title>Registration Page</title>
       <style type="text/css">
         table
        {
             width: 450px;
             border: 1px solid red;
              background-color: #FFCB29;
              border-collapse: collapse;
          }
          td
         {
             width: 200;
             height: 40px;
             border: 1px solid black;
          }
          span
          {
              background-color: red;
          }
      </style>
  </head>
  <body style="background-color: blue; background-image: url(/image/bearjpg); background-repeat: repeat;">
      <form name="registerform" id="form1" action="" method="post">
      <table align="center" cellspacing="0" cellpadding="0">
          <tr>
              <td>
                  username:
              </td>
              <td>
                  <input type="text" />
              </td>
          </tr>
          <tr>
              <td>
                  password:
              </td>
              <td>
                  <input type="password" />
              </td>
          </tr>
          <tr>
              <td>
                  Confirm Password:
              </td>
              <td>
                  <input type="password" />
              </td>
          </tr>
          <tr>
              <td>
                  Please select a city:
              </td>
              <td>
                  <select>
                      <optgroup label="China">
                          <option>Gansu Province</option>
                          <option>Henan Province</option>
                          <option>Shanghai</option>
                      </optgroup>
                      <optgroup label="American">
                          <option>California</option>
                          <option>Chicago</option>
                          <option>New York</option>
                      </optgroup>
                  </select>
              </td>
          </tr>
          <tr>
             <td>
                 Please select gender:
            </td>
            <td>
                 <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">Male</lable>
                     <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">Female</label>
                     <input type="radio" name="sex" id="secret" value="2" /><label for="secret">Confidential</label>
              </td>
          </tr>
          <tr>
              <td>
                  Please select your occupation:
              </td>
              <td>
                  <input type="radio" id="student" name="profession" /><label for="student">Student</label>
                  <input type="radio" id="teacher" name="profession" /><label for="teacher">Teacher</label>
                  <input type="radio" id="others" name="profession" /><label for="others">Others</label>
              </td>
          </tr>
          <tr>
              <td>
                  Please select hobbies:
              </td>
              <td>
                  <fieldset>
                      <legend>Your hobbies</legend>
                      <input type="checkbox" name="hobby" id="basketboll" checked="checked" /><label for="basketboll">Play basketball</label>
                      <input type="checkbox" name="hobby" id="run" /><label for="run">Run</label>
                     <input type="checkbox" name="hobby" id="read" /><label for="read">Read</label>
                     <input type="checkbox" name="hobby" id="surfing" /><label for="surfing">Surfing</label>
                 </fieldset>
             </td>
         </tr>
         <tr>
             <td>
                 Remark:
             </td>
             <td>
                 <textarea cols="30">Here is the note content</textarea>
             </td>
         </tr>
         <tr>
             <td>
                 &nbsp;
             </td>
             <td>
                 <input type="submit" value="Submit" />
                 <input type="reset" value="Reset" />
             </td>
         </tr>
     </table>
     </form>
 </body>
 </html>