Application examples to learn web production commonly used in web forms

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>

Published 50 original articles · won praise 5 · views 30000 +

Guess you like

Origin blog.csdn.net/html168/article/details/104466794