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

1、所有的表单都是在<form></form>中。

这一对标记用来创建一个表单，也就是表单的开始位置和结束位置。

OK，掌握<form></form>,表单你就学会一半了。

2、OK，来看下表单的几个基本属性：

name:给表单命名。

这个命名有什么含义呢？表单是要提交到后台的，而一个网页中可能会有多个表单，该名字用于区分。不过这不是一个必须的属性。

action:表单中的数据将会提交到该地址进行处理。

这个属性也不是一个必须的属性，如果不写，那么会将是当年网侮激页。

method:数据提交到后台使用哪种HTTP提交的董慎方式。

提交方式有两种，post和get

1)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更是一模一样

不一养的就是select

size:代表最多显示个option

multiple；用于规定可同时选择多个选项

2、看网页的效果

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