html 控件
http://book.51cto.com/art/201111/304699.htm
http://book.51cto.com/art/201111/304700.htm
2.1.2 基础知识--HTML表单控件(1)
上面学习了如何创建一个HTML表单,本小节将介绍一些常用的HTML表单控件,它们通常被包含在表单中,从而实现各种交互功能。
1.单行输入文本框
单行输入文本框主要用于提供少量的文本输入,输入的文本可以是任何字符或数字。示例代码如下:
- <input type="text" name="yourname" />
2.普通按钮
普通按钮的示例代码如下:
- <input type="button" value="link"/>
3.提交按钮
提交按钮用来将表单(Form)里的信息提交给表单中action所指向的文件。提交按钮是表单中不可缺少的控件,只有当用户用鼠标单击提交按钮后,浏览器才把表单数据发送给服务器。没有提交按钮,表单数据就不会被发送出去。一个表单中可以有多个提交按钮,但它们的名称应该互不相同。用户可以单击其中的任何一个,表单数据都将被提交。示例代码如下:
- <input type="submit" value="sub" name="submit1" />
上述代码中,属性value的值是提交按钮上的提示字符串,默认值是"submit"或"提交查询内容"。提交表单时,提交按钮的"名称/值"对同样作为表单数据被传送到服务器中。
4.密码输入框
在Web页面上输入密码也是通过一个单行文本框来实现的,所以从外观上看起来,与单行输入文本框没有区别,但与单行文本框不同的是,在输入密码时,所输入的字符并不像单行输入文本框那样按照原样显示出来,而是将所有的字符用"*"符号代替,即输入的字符是不可见的,从而起到保密作用。示例代码如下:
- <input type="password" name="yourpw">
从上述代码中可以看出,输入密码框控件与输入文本框控件的创建上只有type属性值设置不同。
5.多行输入框
可以输入多行文字。示例代码如下:
- <textarea name="yours" cols="50" rows="3">textarea>
6.下拉框(select)
可以做单选,也可以做多选。示例代码如下:
- <select name="food">
- <option value="rice">大米
- <option value="noodles">面条
- <option value="Apple">苹果
- select>
如果变成多行显示,示例代码如下:
- <select name="food" multiple="multiple">
- <option value="rice">大米
- <option value="noodles">面条
- <option value="apple">苹果
- select>
2.1.2 基础知识--HTML表单控件(2)
7.单选按钮
单选按钮在Web页面上显示为一个空心圆圈,当用户在某一圆圈上单击鼠标时,圆圈中会出现一个实心圆点,表示该项被选中。再次单击该圆圈时,圆点消失,表示取消选中该项。示例代码如下:
- <input type="radio" name="food" value="food">食物<br>
8.复选框
复选框在Web页面上显示为一个小方框,可以用鼠标单击小方框进行选择或者取消选择。被选择项的方框中会被打上一个勾,表示被选中。当一个复选框单独使用时,复选框就像一个开关,它的取值只有两种可能:开(On)或关(Off)。如果用户选中一个复选框,当表单被提交时,浏览器会以"变量名=On"的形式,将该复选框的"名称/值"对传递给服务器。如果用户没有选中该复选框,则浏览器在提交表单时将忽略该复选框。示例代码如下:
- <input type="checkbox" name="check" id="check"/>
通常情况下,复选框不是单独使用,而是成组使用,这样就可以构成一个多项选择。复选框的主要作用是让用户从多个可选项目中可同时选择多个,这一点是与单选按钮不相同的。
9.隐藏控件
隐藏控件不会在网页上显示出来,所以在网页上用户看不到任何此控件存在的迹象。这种控件不是用来让用户看的,而是为Web开发者提供的。隐藏控件是一个虽然不显示但其值会随着表单被提交的控件。Web开发者通常使用这种控件类型存储浏览器和服务器之间交换的信息。示例代码如下:
- <input type="hidden" name="op" value="end" />
这里应该注意的是,由于隐藏控件不会被显示,所以用户在访问时无法输入相应的值,它的值是由Web开发人员进行设置的。
10.图像控件
可以使用input控件创建一个图像控件,单击该控件之后,表单立即被提交。所以可以通过简单的设置(属性src指向一个事先处理好的图片)将其作为提交按钮来使用。示例代码如下:
- <input type="image" src="logo.gif" name="image"/>
也可以直接用img控件创建。示例代码如下:
- <img src="logo.gif" name="image"/>
11.文件控件
可以使用input控件创建文件控件,该控件带有一个文本框和一个浏览按钮,通常用于文件的上传。用户可以在文本框中输入文件路径,也可以单击浏览按钮,找到你要的文件。示例代码如下:
- <input type="file" name="file1" value="上传文件" />
用户要使文件上传成功,必须注意以下几点:
文件控件必须出现在
