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

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

工具/原料

一台电脑

txt文档\DW等

一.表单基本语法

1、所有的表单都是在<form></form>中。这一对标记用来创建一个表单，也就是表单的开始位置和结束位置。OK，掌握<form></form>,表单你就学会一半了。

2、OK，来看下表单的几个基本属性：name:给表单命名。这个命名有限鬃鹣哺什么含义呢？表单是要提交到后台的，洹彭岣啬而一个网页中可能会有多个表单，该名字用于区分。不过这不是一个必须的属性。action:表单中的数据将会提交到该地址进行处理。这个属性也不是一个必须的属性，如果不写，那么会将是当年网页。method:数据提交到后台使用哪种HTTP提交的方式。提交方式有两种，post和get1)post:安全。表单收集到的数据放置在HTTP头中，是看不到的。2)get:不安全。表单收集到的数据放置在网址栏中进行提交。

3、OK，下面来看下简单的代码。到在里，表单的基础内容就完了，在<form></form>之间的就是表单的所有内容了。

二.添加文本域

1、讲解文本域之前，必须要讲下这个:input标签--表单万年光棍。这个标签在<form>中使用。根据type类型决定他是文本、密码或者其他。

2、比如，我想添加一个姓名的文本域。<input name="name1" type="text" value="LOL" size="6" maxlength="4">name:该字段的名称。别想的那么复杂，就是起个名字，方便识别type:代表是一个文本字段value:用于定义文本字段的默认值size：文本字段的长度maxlength:最多可以输入的字符数OK，看代码。

3、如图所示，为网页的效果。

三.添加密码字段

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

2、OK，在上一步的技术上，添加密码字段。<input name="passwd1" type="password" value="heihei" size="20" maxlength="20">name:同上type:代表密码字段value:同上size:同上maxlength:同上。（OK,后续这些意思一样的字段，就不再单独列出了）看代码

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

四.添加提交按钮

1、提交按钮的做用是来提交的......好像废话总之，单击提交按钮，就可以实现表单内容的提交啦。<input name="button1" type="submit" value="提交">value：显示该按钮的名称

2、看网页效果

五.添加重置按钮

1、顾名思义，重置。<input name="reset1" type="reset" value="重置">看代码

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

3、点击重置后，重新回到初始状态

六.添加单选按钮

1、这个稍微复杂一点，不聪艄料姹再使用上面的代码了，重新写一个。性别：<input name="sex" type="radio" value="稆糨孝汶;0" checked="checked">男人<input name="sex" type="radio" value="1" >女人<input name="sex" type="radio" value="2" >胡一菲有几个需要注意：1）name的值必须一样2）value的值必须不一样,否则计算机怎么知道你选的哪个？这里，0代码男人，1代码女人，2代码胡一菲。计算机收到的数字是几，就知道你选的什么。3）checked：只有一个可以带这个参数，其他的都不可以。他表示默认选择。

2、看代码的网页效果

3、OK，举个错误的例子，性别：<input name="sex1" type="radio" value="0" checked="checked">男人<input name="sex2" type="radio" value="1" >女人<input name="sex3" type="radio" value="2" >胡一菲这里，将name设置为不一样

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

七.添加复选框

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

2、看例子：<form action="http://www.baidu.com" method="get" name="form_test">你喜欢的明星：<input name="lk1" type="checkbox" value="0" checked="checked">曾小贤<input name="lk2" type="checkbox" value="1" checked="checked">狂暴之心<input name="lk3" type="checkbox" value="2" checked="checked">凯<input name="lk4" type="checkbox" value="3" checked="checked">龙血武姬在这里，name可以各自有各自的名字，checked可以随意制定，想有多少就有多少。

3、看网页的效果

4、OK，咱试试名字一样的效果<input name="lk" type="checkbox" 即枢潋雳value="0" checked="checked">曾小贤<input name="lk" type="checkbox" value="1" checked="checked">狂暴之心<input name="lk" type="checkbox" value="2" checked="checked">凯<input name="lk" type="checkbox" value="3" checked="checked">龙血武姬这里，名字都是一样的，lk

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

八.添加下拉菜单

1、主要是通过<select>和<option>来实现。<select>用来表明：我一个下拉菜单<option>用来表明:我是下拉菜单里面的选项所以，一般有一个<select>，而又好多<option>,而<option>是在<select>中的。

2、看代码：<select name="hehe"><option value="0媪青怍牙" selected="selected">上单</option><option value="1" >打野</option><option value="2" >辅助</option><option value="3" >ADC</option><option value="4" >APC</option><option value="4" >泉水</option>其中，selected只有一个其他的，没什么要说的了

3、看网页效果

九.添加列表项

1、额，直接看代码。<select name="hehe" size=争犸禀淫"3" multiple="multiple"><option value="0" selected="selected">上单</option><option value="1" >打野</option><option value="2" >辅助</option><option value="3" >ADC</option><option value="4" >APC</option><option value="4" >泉水</option>可以看到，和下拉菜单差不多。option更是一模一样不一养的就是selectsize:代表最多显示个optionmultiple；用于规定可同时选择多个选项

2、看网页的效果

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