我教女朋友学编程Html系列(6)—Html常用表单控件
做过网页的人都知道，html表单控件十分重要。基本上我们注册会员、登录用户，都需要填写用户名、密码，那些框框都是表单控件。
本来今天就想写一些常用的html表单控件，于是开始搜资料，找到了一个网页，作者的写作思路和我的基本相同，不过不足的是缺少效果图。
我打算结合着这位仁兄的文章补充一下，增加一些效果图，另外把一些新内容也补充进去，原文的地址是：
HTML表单(Forms)
我站在这位仁兄的肩膀上写作，再增加一些东西，配上一些图，我想，效果应该很好，接着就跟着我来学习吧。
HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：
<html> <head><title>输入用户姓名</title></head> <body> <form action="http://www.php100.com/a.php" method="get"> 请输入你的姓名： <input type="text" name="yourname"> <input type="submit" value="提交"> </form> </body> </html>
效果图如下：
学习HTML表单(Form)最关键要掌握的有三个要点：
- 表单控件(Form Controls)
- Action
- Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type="text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的action="http://www.php100.com/a.php"。代表的就是把这个表单中的信息提交到a.php这个后台程序中处理。(注: php是一门编写后台程序的语言)
至于method，表示了发送表单信息的方式。method有两个值：get和post。
get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。
比如：http://www.baidu.com/s?name=jinhe&boy=1，这里就把参数name(值为jinhe)和boy(值为1)传递给了百度，参数和网址之前使用【?问号】间隔，各个参数之间使用&分割。
而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。
那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
HTML表单(Form)常用控件有：
|
表单控件(Form Contros) |
说明 |
|
input type="text" |
单行文本输入框 |
|
input type="submit" |
将表单(Form)里的信息提交给表单里action所指向的文件 |
|
input type="checkbox" |
复选框 |
|
input type="radio" |
单选框 |
|
select |
下拉框 |
|
textArea |
多行文本输入框 |
|
input type="password" |
密码输入框(输入的文字用*表示) |
一、
表单控件(Form Control)：单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：
<html> <head><title>输入用户姓名</title></head> <body> <form action="http://www.php100.com/html/asdocs/html_tutorials/yourname.php" method="get"> 请输入你的姓名： <input type="text" name="yourname"> <input type="submit" value="提交"> </form> </body> </html>
效果图如下：
二、
表单控件(Form Control)：复选框(input type="checkbox")
复选框允许用户在一组选项里，选择多个。示例代码：
<html> <head><title>选择</title></head> <body> 请选择你喜欢的水果：<br> <form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"> <input type="checkbox" name="fruit" value ="apple" >苹果<br> <input type="checkbox" name="fruit" value ="orange" checked="checked">桔子<br> <input type="checkbox" name="fruit" value ="mango">芒果<br> <input type="submit" value="提交"> </form> </body> </html>
效果图如下：
说明：
1，
注意这3个复选框有个共同的特点，name="fruit"，也就是说它们的name是相同的，这就告诉了浏览器，它们3个是一组的。
如果有另外一组复选框，那么就需要指定另外一个name。具体如何区分组，主要看你想干什么，比如你先问你喜欢的水果有哪些(苹果、桔子、芒果，这是一组)，然后你又想问你喜欢的国家有哪些(英国、美国、日本，这又是一组，就应该和前一组设置不同的name)。
2，
属性value是这个复选框的值，一般会通过脚本来获取选中的复选框的值。
跟在input后面的文字，是显示给用户看的，可以说是“复选框的代表的意思”，它可以和value相同，也可以不同。
3，
从效果图中可以看到，“桔子”这一个复选框选中了，这是因为它对应的input中增加了一个属性checked="checked"，通过这个属性，可以设置复选框为默认选中状态。
三、
表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：
<html> <head><title>选择</title></head> <body> 请选择你最喜欢的水果：<br> <form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"> <input type="radio" name="fruit" value = "Apple">苹果<br> <input type="radio" name="fruit" value = "Orange" checked="checked">桔子<br> <input type="radio" name="fruit" value = "Mango">芒果<br> <input type="submit" value="提交"> </form> </body> </html>
效果图如下：
说明：
1，
注意这3个单选框有个共同的特点，name="fruit"，也就是说它们的name是相同的，这就告诉了浏览器，它们3个是一组的。
如果有另外一组单选框，那么就需要指定另外一个name。
如果你不指定name，那么浏览器就认为所有的单选框都是一组，这样你就只能选择一个单选框，不行的话你可以试试看。
2，
属性value是这个单选框的值，一般会通过脚本来获取选中的单选框的值。
跟在input后面的文字，是显示给用户看的，可以说是“单选框的代表的意思”，它可以和value相同，也可以不同。
3，
从效果图中可以看到，“桔子”这一个单选框选中了，这是因为它对应的input中增加了一个属性checked="checked"，通过这个属性，可以设置单选框为默认选中状态。
四、
表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：
<html> <body> <form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"> 你最喜欢的水果是： <select name="fruit" > <option value="apple">苹果 <option value="orange" selected="selected">桔子</option> <option value="mango">芒果 </select> <input type="submit" value="提交"> </form> </body> </html>
效果图如下：
说明：
1，
一个下拉框就有一个name，不过一般都是设置id，然后使用脚本来获取它的被选中的值。
2，
仔细看的话，会发现，苹果直接跟在option后面，而桔子的后面还有个闭合的标签</option>，一般我们写程序都是使用后者，不知道IE6、IE7、IE8是否支持前者。
3，
如果桔子没有加selected="selected"，那么默认选中的就是第一个选项“苹果”，因此可以使用selected="selected"来设置默认选择项。
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。用户还可以用size属性来改变下拉框(Select)的大小。例句：
<html> <head><title>选择</title></head> <body> <form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"> 你最喜欢的水果是：<br> <select name="fruit" multiple size = ""> <option value="apple">苹果 <option value="orange">桔子 <option value="mango">芒果 </select> <br> <input type="submit" value="提交"> </form> </body> </html>
效果图如下：
说明：
1，
这种用法虽然比较少，不过有时确实很管用，select加一个multiple就行了。
2，
属性size指的是预留几个选项的空间，这里设置了size=”5”，看图可知，已经有了3个选项，下面的位置正好够2个选项。
如果实际的选项个数比较多，就会出现一个滚动条。
五、
表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：
<html> <head><title>请提宝贵意见</title></head> <body> <form action="http://www.php100.com/html/asdocs/html_tutorials/suggest.php" method="get"> 请提宝贵意见：<br> <textarea name="yoursuggest" cols ="" rows = ""></textarea> <br> <input type="submit" value="提交"> </form> </body> </html>
效果图如下：
说明：
1，
其中cols表示textarea的宽度，单位是字符，一个英文字母占一个字符，一个汉字占两个字符，这个常识要记住，这里cols=”50”就是可以输入25个汉字或50个英文字母。
rows表示textarea的高度，单位是行。这里设置rows=”3”只是预留了3行的空间，如果输入的内容超过了3行，就会增加一个滚动条。
六、
表单控件(Form Control)：密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。例句如下：
<html> <head><title>输入用户姓名和密码 </title></head> <body> <form action="http://www.php100.com/html/asdocs/html_tutorials/userpw.php" method="post"> 请输入你的姓名： <input type="text" name="yourname"><br> 请输入你的密码： <input type="password" name="yourpw"><br> <input type="submit" value="提交"> </form> </body> </html>
效果图：
说明：
可以从截图中看出来，密码文本框输入之后就是黑点点，防止偷窥啊。
七、
表单控件(Form Control)：提交(input type="submit")，重置(input type="reset")，按钮(input type="button")。
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。
重置(input type="reset")可以清空文本框中的值。
按钮(input type="button")用的是最多的，一般会配合脚本使用。
例句如下：
<html>
<head><title>输入用户姓名和密码 </title></head>
<body>
<form action="http://www.php100.com/html/asdocs/html_tutorials/userpw.php" method="post">
请输入你的姓名：
<input type="text" name="yourname"><br>
请输入你的密码：
<input type="password" name="yourpw"><br>
<input type="submit" value="提交"> <br>
<input type="reset" value="重置"> <br>
<input type="button" onclick="alert('谁叫你单击我勒？')" value="按钮">
</form>
</body>
</html>
效果图如下：
说明：
1，
当你单击提交的时候，提示“403 Forbidden”，其实页面已经把数据提交到了action指定的页面，因此页面会转向其他页面。
可能是因为没有权限，或者这个页面根本不存在，所以才会报错误的。
2，
单击重置，你会发现，输入文本框中的值被清空了。
3，
单击按钮，弹出提示“谁叫你单击我勒？”，这是因为onclick="alert('谁叫你单击我勒？')"， 属性onclick可以指定当按钮被单击时，要执行的动作，一般通过脚本来写程序完成，这里的alert是一个脚本函数，就是让浏览器弹出一个提示框，内部的内容应该用单引号包住。
八、
表单控件(Form Control)：图片提交(input type="image")
input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。
代码如下：
<html> <head><title>输入用户姓名</title></head> <body> <form action="http://www.php100.com/html/asdocs/html_tutorials/yourname.php" method="get"> 请输入你的姓名： <input type="text" name="yourname"><br> <input type="image" src ="lp.jpg" alt = "提交" NAME="imagesubmit"> </form> </body> </html>
效果图如下：
这里，我把罗胖的头像当做按钮了，只要单击罗胖的头像，就会提交这个页面。
写文章，真得不容易啊，我这是站在别人的肩膀上，增加一些说明、效果图、合并一些例子，就这还花了2个多小时啊，不过，我发现，修改别人的文章，增加一些个人的东西，能够互补性的学习一些内容，而且节约了一些时间。
如果，你还有什么要补充的，可以站在我的肩膀上修改，这样能节省很多时间，还能促进你的进步，学习嘛，就是一个互相交流的过程。
我教女朋友学编程Html系列(6)—Html常用表单控件的更多相关文章
- 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子
昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...
- 我教女朋友学编程html系列(5) html中table的用法和例子
女朋友不是学计算机的,但是现在从事计算机行业,做技术支持,她想学习编程,因此我打算每天教她一点点,日积月累,带她学习编程,如果其他初学者感兴趣,可以跟着学. 为了将table介绍的简单.生动,具有实战 ...
- 一步一步学Silverlight 2系列（9）：使用控件模板
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列（2）：基本控件
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- AnjularJS系列2 —— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...
- Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...
- Bootstrap系列 -- 14. 表单控件输入框input
每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...
- 【AnjularJS系列2 】— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...
- 从零开始学 Web 之 HTML（三）表单
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
随机推荐
- 树莓派（Rospberry Pi B+）到货亲测
1 图鉴 Rospberry Pi B+终于在今天下午有蜗牛快递公司圆*送到了.B+主要是增加了2个USB,增加了GPIO,sd卡换成了micro sd ...先不说直接上图再说,期待了好久好久 整 ...
- NASM编译器的$和$$标记
NASM中的times相当于MASM中的dup起到重复定义的作用. $表示当前行的偏移地址,$$表示当前段的起始偏移地址, ;------------------------------------- ...
- JavaScript常用标签和方法总结
什么是javascript? (1) JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的 脚本语言. (2) JavaScript是由Nets ...
- input 文本框和 img 验证码对齐问题
input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...
- 第一部分 CLR基础：第3章 共享程序集和强命名程序集
第一部分 CLR基础:第3章 共享程序集和强命名程序集
- DataGridView取消默认选中行
DataGridView在添加数据后会默认选中第 一个单元格或者第一行,我就想取消它的默认选中行.在DataGridView绑定数据之后加上了ClearSelection().这样一来,不论是启动窗体 ...
- [leetcode]_Valid Parentheses
题目:判断给定字符串中的括号是否合法.题目中涉及三种符号'(' + ')' , '[' + ']' , '{' + '}'. 思路:利用stack来存储符号. 注意申请char型stack是: Sta ...
- HOOK API 在多线程时应该注意的问题点
在使用INLINE HOOK API实现对系统API的拦截时,正常情况下并没有太大问题,但一旦涉及到多线程,不管是修改IAT还是JMP,2种方法均会出现不可预料的问题,特别是在HOOK一些复杂的大型系 ...
- 关于 mvc 中 连字符 - 和下划线 _转换的问题。
[潜水]大崔||哈尔滨(759666247) 10:02:16 如图 C#不承认 “-”[知府]古道今-湖北\xig<systemobject@126.com> 10:03:54 ...
- 共享内存shared pool （6）：追踪sql语句
构建实验数据 --使用NC50用户查询(会话1) SQL> conn NC50/NC50 Connected. SQL> create table emp as select * from ...