Application of Web Forms used in the production of example learning Web pages

Web page

To tell the truth, whether it is asp,php or JSP for network programming, can not be separated from the user interaction.

and man-machine conversation platform, basically rely on the corresponding text, list box input, and then through the button submitted to the database.

So learning network programming must be aware of these input platform related things: forms (Form) its 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>

Can be summed up: The form is included in the relevant content within <form>...</form>.

The interior can be divided into three main categories: Input,select,textarea

First, look at the <form> internal parameters

Parameter name: Used to represent the unique name of the form, to facilitate a page to create multiple forms without confusing, and of course, to accept the page's confirmation relationship.

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 comparisons, additions, modifications, and so on.

Parameters method: The form's submission method, including two methods: Post and get. Post is the transmission of information content, get is the transfer URL value, the specific usage will be described in the next section, "Built-in object request"

Second, to look at the input related

Input represents an input object in form forms that is divided into text input boxes, password input boxes, radio/check boxes, submit/reset buttons, and so on, as described below.

1,type=text

input type is text, this is the most we see is also used most, such as login to enter the user name, registration input phone number, email, home address and so on. Of course this is also the default type of input.

Parameter name: The same is the name of the text input box that is represented.

Parameter size: The length of the input box.

Parameter 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, you cannot add modifications.

<form>
Your name:
<input type= "text" name= "yourname" size= "maxlength=" "value=" the length of the input box is 30, allowing the maximum number of characters to be "><br>
<input type= "text" name= "yourname" size= "" Maxlength= "" ReadOnly value= "You can only read can not modify" >
</form>

2,type=password

I don't need to say, a look at the password input box, the biggest difference is when entering information in this input box is displayed as a confidential character.

parameter is similar to "Type=text".

<form>
Your password:
<input type= "password" name= yourpwd "size=" maxlength= "value=" > Password length less than 15
</form>

3,type=file

When you upload a picture in the BBS, upload the attachment in the email must be something:

Provides a platform for the input of a file directory, with name,size parameters.

<form>
Your file:
<input type= "File" Name= "Yourfile" size= ">"
</form>

4,type=hidden

A very noteworthy one, usually called a hidden field: if a very important piece of information needs to be submitted to the next page, it cannot or cannot be expressed.

In a word, you can't see where hidden is in the page. The most useful is the value of hidden.

<form name= "Form1" >
Your hidden info here:
<input type= "hidden" name= "Yourhiddeninfo" value= "webjx.com" >
</form>
<script>
Alert ("The value of the hidden field is" +document.form1.yourhiddeninfo.value)
</script>

5,type=button

A standard Windows-style button, of course, to allow the button to jump to a page also need to join the write JavaScript code

<form name= "Form1" >
Your button:
<input type= "button" Name= "Yourhiddeninfo" value= "go,go,go!" ">
</form>

6,type=checkbox

Multi-selection box, common in the registration of the choice of hobbies, personality, and other information. Parameter has Name,value and special parameter checked (indicates default selection)

In fact, the most important thing is value, which is submitted to the processing page is value. (Attached: The name value can be different, but 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 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 selection box, appears in the multiple select one of the page settings. The parameters also have Name,value and special parameter checked.

Unlike the checkbox, the name value must be the same, otherwise you cannot select one more. It is also the value of the value that is 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, which does not achieve the effect of more than one choice <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

Compare the alternative one, you see the effect bar, can be submitted as a picture

<form name= "Form1" action= "xxx.asp" >
Your imgsubmit:
<input type= "image" src= "Http://www.webjx.com/htmldata/blog/images/face4.gif" >
</form>

9,type=submit and Type=reset

Two buttons, "Submit" and "Reset", respectively.

The main function of submit is to submit all the contents of the form to the action page, and reset to the function of quickly emptying all the completed content.

<form name= "Form1" action= "xxx.asp" >
<input type= "text" name= "Yourname" >
<input type= "Submit" value= "submitted" >
<input type= "reset" value= "reset" >
</form>

INPUT type summary down there are 10, or a lot of, hehe

Third, then look at the Select related

Select mainly to do drop-down menu, Jump menu, (drop-down) list.

It has an inline code <option>...</option>,option parameter value is the value to pass the processed values, option also has parameter selected, which indicates the default is selected.

1, drop down menu

Just the menu-style 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 selection for the menu is +document.form1.selectwhat.value)
</script>

2, Jump Menu

Add JavaScript as a jump menu based on the Drop-down menu.

<select >
<option selected> Web Site Connection ......</option>
<option value= "http://www.webjx.com/" >Webjx.Com</option>
<option value= "http://www.sina.com.cn/" >Sina.com.cn</option>
<option value= "http://www.163.com/" >163.com</option>
</seclect>

3, drop down list

The biggest difference with the Drop-down menu is that select has a size value that is not the length of the column, but the height of the list.

Of course, there are more important: the menu can only choose one, and the list can select multiple, the special parameter for multiple size=1 is simply 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'll find a big 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 discovery can be selected with multiple selections, including shift for quick selection and CTRL for Point selection
<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>

Four, the final concern of the TEXTAREA

You can interpret the TextArea text area as an enlarged text entry box.

The parameter has no value and the default value is set between <textarea>...</textarea>.

Other parameters are rows, which represent the number of lines in the text area, and the parameter cols, which represents the number of columns in the text area.

Also has the parameter warp, when Warp=off indicates that the text area does not wrap automatically, certainly does not write the default is the automatic line wrapping.

<form name= "Form1" >
<textarea name= "Textinit" rows= "5" cols= "" "wrap=" off ">5 row 20 column, do not automatically wrap </textarea>
</form>