Introduction to ASP Programming (II): Understanding the basis of form _asp

Source: Internet
Author: User
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)
The basic format is as follows:
<textarea class="bk" id="temp16657" rows="12"><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></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]
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"

two, and then 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.
<textarea class="bk" id="temp8371" rows="12"><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 20 "><br> <input type=" text "name=" yourname "size=" maxlength= "" "ReadOnly value=" You can only read can not modify "> </form ></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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".
<textarea class="bk" id="temp86345" rows="12"><form> Your password: <input type= password name= "yourpwd" size= "maxlength=" value= "123456" > Password length is less than </form></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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.
<textarea class="bk" id="temp25866" rows="12"><form> your file: <input type= "file" Name= "Yourfile" size= "" > </form></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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.
<textarea class="bk" id="temp7303" rows="12"><form name= "Form1" > Your hidden info here: <input type= "hidden" name= "Yourhiddeninfo" value= "cnbruce.com" & Gt </form> <script> Alert ("The value of the hidden field is" +document.form1.yourhiddeninfo.value) </script></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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
<textarea class="bk" id="temp70854" rows="12"><form name= "Form1" > Your button: <input type= "button" Name= "Yourhiddeninfo" value= "go,go,go!" "Onclick=" window.open (' http://www.cnbruce.com ') > </form></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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.) )
<textarea class="bk" id="temp97558" rows="12"><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> name values 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></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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 can't choose one more. It is also the value of the value that is submitted to the processing page.
<textarea class="bk" id="temp17448" rows="12"><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> Below is an example of a different name value, you can't implement the effect of multiple selection <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></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

8,type=image
Compare the alternative one, you see the effect bar, can be submitted as a picture
<textarea class="bk" id="temp84335" rows="12"><form name= "Form1" action= "xxx.asp" > Your imgsubmit: <input type= "image" src= ". /blog/images/face4.gif "> </form></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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.
<textarea class="bk" id="temp83672" rows="12"><form name= "Form1" action= "xxx.asp" > <input type= "text" name= "yourname" > <input type= "Submit" value = "Submit" > <input type= "reset" value= "reset" > </form></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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.
<textarea class="bk" id="temp59105" rows="12"><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 selected value for the menu is "+document.form1.selectwhat.value") </script></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

2, Jump menu
Add JavaScript as a jump menu based on the Drop-down menu.
<textarea class="bk" id="temp32806" rows="12"><select onchange= "If" (This.selectedindex && this.selectedindex!=0) {window.open (this.value);} this.selectedindex=0; " > <option selected> website connection ......</option> <option value= "http://www.cnbruce.com/" >cn-bruce</ option> <option value= "http://www.blueidea.com/" >Blue!dea</option> <option value= "http:// www.it365cn.com/">It365cn</option> </seclect></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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 is multiple
<textarea class="bk" id="temp85144" rows="12">size=1 is just 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 the big different <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 multiple selected, including shift for quick selection and CTRL for dot 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></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

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.
<textarea class="bk" id="temp28129" rows="12"><form name= "Form1" > <textarea name= "textinit" rows= "5" cols= "" wrap= "off" >5 row 20 column, do not wrap automatically </textarea > </form></textarea>
[Ctrl + a All choose to copy tips: You can modify some of the code, and then click to Run]

Final Summary:input According to type is divided into 10 categories, select from the option from the menu and list, textarea has rows of columns of text input area

Two articles worth recommending
Pattern form: http://www.blueidea.com/tech/web/2003/377.asp
Form effects: http://www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=271
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.