JSP form (Form)

Form)

To be honest, no matter ASP, PHP or JSP network programming, interaction with users is inseparable.
The human-machine interaction platform basically relies on the corresponding text and list box for input, and then submits the data to the database through the button.
Therefore, to learn about network programming, you must understand these input platform related things:Form)
The basic format is as follows:

<Form name = "form1" Action = "XXX. asp" method = "Post">
<Input type = "text" name = "yourname">
<Select name = "selectwhat">
<Option> AAA </option>
<Option> AAA </option>
</SELECT>
<Textarea name = "textinit" rows = 5 Cols = 10> </textarea>
</Form>
It can be concluded that the form contains the relevant content in <form>... </form>.
There are three internal categories:Input, select, textarea

First, check the internal parameters of <form>.
Parameter Name: indicates the unique name of the form. It is used to create multiple forms on a page without confusion. Of course, it is used to accept the confirmation relationship of the page.
Parameter action: it is obvious that all content in the current form will be sent to a page for processing. Processing includes receiving information, database comparison, adding, and modification.
Parameter Method: the form submission method, which includes two methods: Post and get. Post is the content of transmission information, and get is the URL value for transmission. The specific usage will be described in the next section "embedded object request ".

2. Let's look at the input
Input indicates an input object in the form, which is divided into text input boxes, password input boxes, single choice/check boxes, and submit/Reset buttons according to the type.
1, type = text
The input type is text, which is the most common and most commonly used. For example, you can enter the user name, register and enter the phone number, email, home address, and so on. Of course, this is also the default input type.
Parameter Name: the name of the text input box.
Parameter size: the length of the input box.
Maxlength: the maximum number of characters allowed in the input box.
Parameter value: the default value in the input box.
Special parameter readonly: indicates that the box can only be displayed and cannot be added or modified.

<Form>
Your name:
<Input type = "text" name = "yourname" size = "30" maxlength = "20" value = "the input box length is 30, the maximum number of characters allowed is 20 "> <br>
<Input type = "text" name = "yourname" size = "30" maxlength = "20" readonly value = "You can only read and cannot modify">
</Form>
2, type = Password
Needless to say, the biggest difference in the password input box that you can understand at a glance is that the input information in this input box is displayed as a confidential character.
The parameter is similar to "type = text.
<Form>
Your password:
<Input type = "password" name = "yourpwd" size = "20" maxlength = "15" value = "123456"> the password length is less than 15
</Form>
3, type = File
What you need when uploading images in BBS and uploading attachments in email :)
Provides a platform for inputting file directories. The parameters include name and size.
<Form>
Your file:
<Input type = "file" name = "Yourfile" size = "30">
</Form>
4, type = hidden
It is worth noting that a domain is often called a hidden domain: if a very important information needs to be submitted to the next page, but it cannot or cannot be expressed explicitly.
In a word, you cannot see where hidden is on the page. The most useful value is the value of hidden.

<Form name = "form1">
Your hidden info here:
<Input type = "hidden" name = "yourhiddeninfo" value = "cnbruce.com">
</Form>
<SCRIPT>
Alert ("the value of the hidden field is" + document. form1.yourhiddeninfo. value)
</SCRIPT>

5, type = button
Standard windows-style buttons, of course, to redirect the buttons to a page, you also need to add JavaScript code
<Form name = "form1">
Your button:
<Input type = "button" name = "yourhiddeninfo" value = "Go, go, go! "Onclick =" window. Open ('HTTP: // www.cnbruce.com ') ">
</Form>

6, type = checkbox
Multi-choice box. It is common to select hobbies, personalities, and other information during registration. Parameters include name, value, and special parameters checked (which indicates the default value)
In fact, the most important thing is the value, which is the value submitted to the processing page. (Note: The name value can be different, but it is not recommended .)

<Form name = "form1">
A: <input type = "checkbox" name = "checkit" value = "A" Checked> <br>
B: <input type = "checkbox" name = "checkit" value = "B"> <br>
C: <input type = "checkbox" name = "checkit" value = "C"> <br>
</Form>
The name value can be different, but it is not recommended <br>
<Form name = "form1">
A: <input type = "checkbox" name = "checkit1" value = "A" Checked> <br>
B: <input type = "checkbox" name = "checkit2" value = "B"> <br>
C: <input type = "checkbox" name = "checkit3" value = "C"> <br>
</Form>

7, type = radio
That is, the single-choice option appears in the page setting for multiple choices. Parameters also include name, value, and special parameter checked.
Unlike checkbox,The name value must be the sameOtherwise, you cannot select one more. Of course, the value is also submitted to the processing page.

<Form name = "form1">
A: <input type = "radio" name = "checkit" value = "A" Checked> <br>
B: <input type = "radio" name = "checkit" value = "B"> <br>
C: <input type = "radio" name = "checkit" value = "C"> <br>
</Form>
The following is an example of a different name value. You cannot select multiple values. <br>
<Form name = "form1">
A: <input type = "radio" name = "checkit1" value = "A" Checked> <br>
B: <input type = "radio" name = "checkit2" value = "B"> <br>
C: <input type = "radio" name = "checkit3" value = "C"> <br>
</Form>

8, type = image
One of them is more alternative. Let's take a look at the effect. It can be used as a submitted image.

<Form name = "form1" Action = "XXX. asp">
Your imgsubmit:
<Input type = "image" src = "../blog/images/face4.gif">
</Form>

9, type = submit and type = Reset
The buttons are "Submit" and "reset ".
The main function of submit is to submit all content in the form to the action page for processing, and reset is to quickly clear all filled content.

<Form name = "form1" Action = "XXX. asp">
<Input type = "text" name = "yourname">
<Input type = "Submit" value = "Submit">
<Input type = "reset" value = "reset">
</Form>

There are 10 input types, but there are still a lot of them.

3. Next let's look at select-related issues.
Select is mainly used for the drop-down menu, jump menu, (drop-down) list.
The embedded code <option>... </option> is provided. The value of the Option parameter is the value passed for processing, and the option parameter is also selected, indicating that the parameter is selected by default.
1. drop-down menu
Only menu display.

<Form name = "form1">
<Select name = "selectwhat">
<Option value = "A"> AAA </option>
<Option value = "B"> BBB </option>
<Option value = "C" selected> CCC </option>
</SELECT>
</Form>
<SCRIPT>
Alert ("the default menu value is" + document. form1.selectwhat. value)
</SCRIPT>

2. navigation menu
Add JavaScript to the navigation menu based on the drop-down menu.
<Select onchange = "If (this. selectedindex & this. selectedindex! = 0) {window. Open (this. Value);} This. selectedindex = 0; ">
<Option selected> website connection ...... </Option>
<Option value = "http://www.cnsec.net/"> CN-sec </option>
<Option value = "http://www.xj.chinavnet.com/"> XJ. chinavnet </option>
<Option value = "http://www.it365cn.com/"> it365cn </option>
</Seclect>

3. drop-down list
The biggest difference from the drop-down menu is that select has an additional size value, which is not the length, but the upper and lower heights of the list.
Of course, there is more important: Only one menu can be selected, and multiple lists can be selected. This special parameter is multiple.
Size = 1 is a drop-down menu.
<Form name = "form1">
<Select name = "selectwhat" size = 1>
<Option value = "A"> AAA </option>
<Option value = "B"> BBB </option>
<Option value = "C"> CCC </option>
</SELECT>
</Form> <br>
Size> 1, you will find the difference
<Form name = "form1">
<Select name = "selectwhat" size = 3>
<Option value = "A"> AAA </option>
<Option value = "B"> BBB </option>
<Option value = "C"> CCC </option>
</SELECT>
</Form> <br>
Added multiple to find multiple options, including shift for quick selection and CTRL for clicking
<Form name = "form1">
<Select name = "selectwhat" size = 3 multiple>
<Option value = "A"> AAA </option>
<Option value = "B"> BBB </option>
<Option value = "C"> CCC </option>
</SELECT>
</Form> <br>

4. Last followed textarea
You can understand the textarea text area as an expanded text input box.
The parameter has no value, and the default value is between <textarea>... </textarea>.
Other parameters include rows, indicating the number of rows in the text area; cols, indicating the number of columns in the text area.
There is also the parameter warp. When warp = off, it indicates that there is no automatic line feed in the text area. Of course, if it is not written, it is automatically wrapped by default.

<Form name = "form1">
<Textarea name = "textinit" rows = "5" Cols = "20" Wrap = "off"> 5 rows and 20 columns without automatic line breaks </textarea>
</Form>