做过网页的人都知道,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常用表单控件的更多相关文章

  1. 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

    昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...

  2. 我教女朋友学编程html系列(5) html中table的用法和例子

    女朋友不是学计算机的,但是现在从事计算机行业,做技术支持,她想学习编程,因此我打算每天教她一点点,日积月累,带她学习编程,如果其他初学者感兴趣,可以跟着学. 为了将table介绍的简单.生动,具有实战 ...

  3. 一步一步学Silverlight 2系列(9):使用控件模板

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. 一步一步学Silverlight 2系列(2):基本控件

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  5. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  6. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  7. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

  8. 【AnjularJS系列2 】— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  9. 从零开始学 Web 之 HTML(三)表单

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. JavaScript高级 面向对象的程序设计 (二)《JavaScript高级程序设计(第三版)》

    二.继承 OO是面向对象语言最为有魅力的概念.一般的OO语言都实现了两种继承,接口继承和实现继承.接口继承只继承方法签名,而实际继承继承了实际的方法. 而在JS中,函数没有签名,所以无法实现接口继承. ...

  2. dedecms后台上传图片附件返回302的问题

    在网上查了资料,验证可行后,在这儿做个备份! 自己解决了,貌似是swfupload在linux环境下session丢失的引起的 解决办法是:在include/userlogin.class.php文件 ...

  3. C#局域网桌面共享软件制作(二)

    链接C#局域网桌面共享软件制作(一) 如果你运行这个软件查看流量监控就会发现1~2M/s左右的上传下载,并且有时会报错“参数无效”,如果你将屏幕截图保存到本地的话每张图片大概4M(bmp).120KB ...

  4. Mysql授权GRANT ALL PRIVILEGES

    1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...

  5. Permission Lists Assigned to a User

    SQL that I find useful in many occasions. It will return a list of permissions that are assigned to ...

  6. Knockout.Js官网学习(简介)

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

  7. Win7更改默认打开方式失败

    问题描述:选定某个给定文件,然后鼠标右键选择打开方式,在浏览后选到自己期望使用的应用程序,然后单击确定后,却发现没有任何效果.原文件仍然保持原来的打开方式. 问题原因:更好程序或者升级程序时安装路径发 ...

  8. delphi 基础之三 文件流操作

    文件流操作 Delphi操作流文件:什么是流?流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具.在流中,定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员是对流进行所有操作的, ...

  9. [terry笔记]物化视图 materialized view基础学习

    一.物化视图定义摘录:     物化视图是包括一个查询结果的数据库对像(由系统实现定期刷新数据),物化视图不是在使用时才读取,而是预先计算并保存表连接或聚集等耗时较多的操作结果,这样在查询时大大提高了 ...

  10. Python学习教程(learning Python)--1.3 Python数据输入

    多数应用程序都有数据输入语句,用于读入数据,和用户进行交互,在Python语言里,可以通过raw_input函数实现数据的从键盘读入数据操作. 基本语法结构:raw_input(prompt) 通常p ...