多语言展示
当前在线:460今日阅读:23今日分享:25

HTML网页制作:[11]插入表单

表单,是作为一个交互式网页必不可少的。比如注册、登陆、留言等,通通需要用到表单。表单使用简单,功能强大,OK,废话不多说,进入正题。
工具/原料
1

一台电脑

2

txt文档\DW等

一.表单基本语法
1

所有的表单都是在

中。这一对标记用来创建一个表单,也就是表单的开始位置和结束位置。OK,掌握
,表单你就学会一半了。

3

OK,下面来看下简单的代码。到在里,表单的基础内容就完了,在

之间的就是表单的所有内容了。

二.添加文本域
1

讲解文本域之前,必须要讲下这个:input标签--表单万年光棍。这个标签在

中使用。根据type类型决定他是文本、密码或者其他。

2

比如,我想添加一个姓名的文本域。name:该字段的名称。别想的那么复杂,就是起个名字,方便识别type:代表是一个文本字段value:用于定义文本字段的默认值size:文本字段的长度maxlength:最多可以输入的字符数OK,看代码。

3

如图所示,为网页的效果。

三.添加密码字段
1

密码字段是一种特殊的字段,要知道,密码无论你输入什么,都是“*”显示的,不然很容易本人看到不是。

2

OK,在上一步的技术上,添加密码字段。name:同上type:代表密码字段value:同上size:同上maxlength:同上。(OK,后续这些意思一样的字段,就不再单独列出了)看代码

3

看网页效果。要知道,我输入的默认值为“heihei”,那么按理说应该显示“heihei”才对,但是因为密码文本只显示“*”,所以最终显示的为6个星。

四.添加提交按钮
1

提交按钮的做用是来提交的......好像废话总之,单击提交按钮,就可以实现表单内容的提交啦。value:显示该按钮的名称

2

看网页效果

五.添加重置按钮
1

顾名思义,重置。看代码

2

看网页效果我在姓名和密码随便说输入一些东西。

3

点击重置后,重新回到初始状态

六.添加单选按钮
1

这个稍微复杂一点,不再使用上面的代码了,重新写一个。性别:男人女人胡一菲有几个需要注意:1)name的值必须一样2)value的值必须不一样,否则计算机怎么知道你选的哪个?这里,0代码男人,1代码女人,2代码胡一菲。计算机收到的数字是几,就知道你选的什么。3)checked:只有一个可以带这个参数,其他的都不可以。他表示默认选择。

2

看代码的网页效果

3

OK,举个错误的例子,性别:男人女人胡一菲这里,将name设置为不一样

4

看代码的网页效果3个选项我都可以选择,这就不是单选按钮了。因为名字设置的不同,所以计算机认为这3个各自都是一个单选按钮字段,所以结果显而易见。

七.添加复选框
1

复选框和单选按钮不同。单选按钮,只能挑选一个选择,而复选框则是想选择几个,就选择几个。

2

看例子:你喜欢的明星:曾小贤狂暴之心龙血武姬在这里,name可以各自有各自的名字,checked可以随意制定,想有多少就有多少。

3

看网页的效果

4

OK,咱试试名字一样的效果曾小贤狂暴之心龙血武姬这里,名字都是一样的,lk

5

看代码效果一样可以随意点,可以多选,所以,名字无所谓。

八.添加下拉菜单
1

主要是通过用来表明:我一个下拉菜单

2

看代码:可以看到,和下拉菜单差不多。option更是一模一样不一养的就是selectsize:代表最多显示个optionmultiple;用于规定可同时选择多个选项

2

看网页的效果

3

OK,到这里就说的差不多了,当然,还有很多其他功能,等待着你深入的学习并掌握

推荐信息