To tell the truth, whether it is time to asp, php or jsp network programming, they are inseparable and user interaction.
The interactive platform is basically carried out by the appropriate text input, list boxes, and then submitted to the database via the button.
So learning network programming must be aware of these platform-enter things: form (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>
It can be concluded that: form i.e. within the content comprising <form> ... </ form> of.
Wherein the interior can be divided into three categories: input, select, textarea
A first look <form> internal parameters
Parameter name: used to represent a unique name of the form, a page has been created to facilitate multiple forms without confusion, of course, but also to accept the confirmation page of the relationship.
Parameters action: obvious, it is the current form will be sent to all the contents of a page to deal with. Including the acceptance of information processing, database compare, add, modify and so on.
Parameter method: i.e., form submission method, two methods including: post and get. post is the transmission of information content, get a transfer url value, will be introduced to the specific use in the next section, "built-in object request" in a new front-end learning qun438905713, most in the group are zero-based learners, we help each other, mutual answers, and also prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Second, look at the relevant Input
Input Form input object means a form, which in turn vary with the type Type partial text entry box, a password input box, radio / checkbox, submit / reset button or the like, introduced one by one below.
1,type=text
The input type is text, which we see the most is the most used, such as landing enter a user name, registration enter the 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.
Parameters size: size of the input frame length.
Parameter maxlength: input box allows the maximum number of input characters.
Parameters value: Default Input box
Special parameters readonly: indicates that the box can only display, you can not add, modify.
<form>
your name:
<INPUT type = "text" name = "yourname" size = "30" MAXLENGTH = "20 is" value = "length of the input block is 30, the maximum number of characters is 20 is"> <br>
< input type = "text" name = "yourname" size = "30" maxlength = "20" readonly value = " you can only read but not modify">
</ form>
2,type=password
I do not say, one can understand the password input box, the biggest difference is displayed as a secret character when entering information in this input box.
Parameters and "type = text" is similar.
<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15
</form>
3,type=file
When you are in something BBS upload pictures, upload attachments at EMAIL certain indispensable :)
It provides a platform for directory input parameters name, size.
<form>
your file:
<input type="file" name="yourfile" size="30">
</form>
4,type=hidden
It is noteworthy that a very, commonly referred to as hidden fields: if a very important message that needs to be submitted to the next, but not the time or can not express.
In short, you do not see on the page is hidden where. 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("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>
5,type=button
A standard windows-style buttons, of course, make a button to jump to the page also need to add JavaScript code to write
<form name="form1">
your button:
<input type="button" name="yourhiddeninfo" value="Go,Go,Go!" οnclick="window.open('http://www.webjx.com')">
</form>
6,type=checkbox
Checkbox, select hobbies Common in registration, personality, and other information. Parameters are name, value and special parameters checked (selected by default representation)
Actually, the most important thing is the value of value, submitted to the processing page is value. (Attached: 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>
name值可以不一样,但不推荐<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 single box, appear in a multiple-choice page settings. Parameters also has name, value and special parameters checked.
Is different from the checkbox, name value must be the same, otherwise it can not be one of many. Of course it is still committed to the value value 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>
下面是name值不同的一个例子,就不能实现多选一的效果了<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
A comparison of alternative, see for yourself the effect of it, you can submit as style pictures
<form name="form1" action="xxx.asp">
your Imgsubmit:
<input type="image" src="../blog/images/face4.gif">
</form>
9,type=submit and type=reset
Are "Submit" and "Reset" button two
The main function is to submit Form submit action in all content pages processed, reset it from a fast fill empty all the contents of the function.
<form name="form1" action="xxx.asp">
<input type="text" name="yourname">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
Type summary Input down there are 10, or a lot, huh, huh
Three, and then look at the relevant Select
Select the main drop-down menu to do the jump menu (drop-down) list.
Which itself has inline code <option> ... </ option>, option value is passed the parameter value, option parameter selected to be treated as well, indicate the default selected.
1, the pull-down menu
But the 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("菜单的默认选取值是 "+document.form1.selectwhat.value)
</script>
2 Jump Menu
Adding JavaScript to be jump menu in the drop-down menu basis.
<select onChange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;">
<option selected>网站连接……</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, the drop-down list
And the biggest difference is the drop-down menu select one more size value that is not the length of the size, but the height up and down the list.
Of course, the main thing is: only choose a menu, and the list can choose more of the special parameters as 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你会发现了大不同
<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>
加入了multiple发现可以多个选择了,包括Shift进行快速全选及Ctrl进行点选
<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>
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Fourth, the final concern Textarea
Textarea text area enlargement can be understood as a text input box.
No parameter which value, a default value is set to <textarea> ... </ textarea> between.
Other parameters also rows, the number of lines of the text area; parameter cols, the number of columns in the text area.
Warp parameters as well, when the warp = off region indicates that the text does not wrap, of course, do not write default wrap.
<form name="form1">
<textarea name="textinit" rows="5" cols="20" wrap="off">5行20列,不自动换行</textarea>
</form>