HTML网页制作基础第七弹

来源：互联网发布：淘宝店铺文案编辑：程序博客网时间：2024/04/29 07:22

昨天学习的表格标签远远不止我所说的这些内容，大家要多去搜索一下相关的知识点。今天就学习一下表单标签的相关内容吧

那么我们今天接着学习新的标和者标签属性吧

form表单元素

创建表单后我们就可以在表单中放置空间以接受用户的输入。这些空间通常房子form标签之中，也可以在表单之外用来创建用户界面。在网络上我们经常见到一些控件。例如，我们每次登陆用到的账号输入框和密码输入框。不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息，我们一般用单行文本框和多行文本框。如果需要在性别上选择一般是单选按钮。

<form>标签用于在网页中创建表单区域，属于一个容器标签，表示其他表单标签需要在它的包围中才有效，

代码示例:

<html>

<head>

<title>

My Page

</title>

</head>

<body>

账号：<input type="text" name="loginId"/><br>

密码：<input type="password" name="passWord"/>

</form>

</body>

</html>

效果显示：

在上面的示例代码中action 后面的值代表需要提交的地址，会将你表单中输入的值传递过去。

method代表表单提交的时候使用什么方式提交，提交方式有get，post

input 用来创建各种表单元素，type的值用来表单需要穿件元素的类型。

表单的细节

介绍一下常用的元素属性；

type 此属性指定表单匀速的类型，可用的选项有：text，password，checkbox,radio,submit,reset,file.hidden,image和buton.默认的选择是text。

name 此属性指定表单匀速的名称，例如，如果表单上有几个文本框，可以按名称来表示它们，如text1，text2.名称性的作用域微form元素内。

value 此属性是可选属性，它指定表单元素的初始值，但是如果type微radio，则必须指定一个值

size 此属性指定表单元素的初始宽度，如果type微text或者password，则表单元素大小以字符为单位。

maxlenght 此属性永爱制动可在text或者password元素中输入的最大字符数。默认值为无限大。

checked 此属性是boolean属性，指定按钮是否是被选中的，当输入类型为radio或者chaeckbox时，使用此属性。

这里就不一一演示了，大大也可以自己联系一下

样子例：

表单中常用的表单元素

文本框：

在表单中最常用，最常见的表单输入元素就是文本框，它提供给用户输入单行文本信息，例如用户名的输入框。如要在文档的表单里创建一个文本框，将表单元素type属性设置为text即可。

代码例子：账号：<input type="text"/>

密码框：

密码在大家认知中，输入密码是不是都是用*代替，如果用text的话用户在文本框中输入的值一览无余，这样很不安全，所以我们可以将type的属性值设置为password

代码例子：密码：<input type="password"/>

效果示例：

单选按钮：

单选按钮作用于一组相互排斥的值，组中每个单选按钮控件应具有相同的名称，用户一次只能选择一个选项。只有从组中选择的单选按钮才会在提交的数据中生成name/value对，单选按钮需要一个显示的value属性

代码示例：

男<input type="radio" value="男" name="gen" checked="checked" />

女<input type="radio" value="女" name="gen" />

注意如果要实现单选功能，单选按钮的那么值必须一致，表单提交时候提交的值是value

复选按钮：

复选框的创建方式和单选框是一样的，只需要将type的值改为checkbox就可以创建复选按钮也就是多选框

多选框与单选框不同表单提交的值是name的属性值。

大家在form表单中单击提交按钮的时候可以发现地址栏中的地址有我们自己加入的属性和属性值：

如果上面的例子提交结果：

我用submit提交的值是多选按钮的第二个，所以在网址后面有一个b=2

下面我提交两个多选框同时选中的提交结果：

那么今天的内容就到这里吧！大家明天见，每天学习一点，每天进步一点。

听雨HTML基础QQ交流群：577919336，大家有兴趣的可以进群交流一下。

或者有问题去听雨的博客反应：

博客地址：http://blog.csdn.net/dx15618816293

附（因为听雨电脑的原因，可能有时很多尾标签的/没有敲上去，所以如果大家是直接复制我的源码过去的话可能无法显示，建议大家还是自己敲一敲。记住一般情况下标签都是有头标签和尾标签的。）

0 0