如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
HTML网页制作：[11]插入表单
来源：互联网
2023-03-16 19:19:16 190
表单，是作为一个交互式网页必不可少的。比如注册、登陆、留言等，通通需要用到表单。
表单使用简单，功能强大，OK，废话不多说，进入正题。
工具/原料
- 一台电脑
- txt文档\DW等
一.表单基本语法
所有的表单都是在form>/form>中。
这一对标记用来创建一个表单，也就是表单的开始位置和结束位置。
OK，掌握form>/form>,表单你就学会一半了。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/256eb672941fbee4b3e258edc1237971ff1de78f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
OK，来看下表单的几个基本属性：
name:给表单命名。
这个命名有什么含义呢？表单是要提交到后台的，而一个网页中可能会有多个表单，该名字用于区分。不过这不是一个必须的属性。
action:表单中的数据将会提交到该地址进行处理。
这个属性也不是一个必须的属性，如果不写，那么会将是当年网侮激页。
method:数据提交到后台使用哪种HTTP提交的董慎方式。
提交方式有两种，post和get
1)post:安全。表单收集到的数据放置在HTTP头中，是看不到的。
2)get:不安全。表单收集到的数据放置在网址栏中进行提交。
OK，下面来看下简单的代码。
到蚊译胳在里，表单的基础内容就完了，在form>/form>之间的就是表单的所有内容了。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/0d2fe5f202b375d70d431347515872dadf49d88f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
二.添加文本域
讲解文本域之前，必须要讲下这个:
input标签--表单万年光棍。
这个标签在form>中使用。
根据type类型决定他是文本、密码或者其他。
比如，我想添加一个姓名的文本域。
input name="name1" type="text" value="LOL" size="6" maxlength="4">
name:该字段的名称。别想的那么复杂，就是起个名字，方便识别
type:代表是一个文本字段
value:用于定义文本字段的默认值
size：文本字段的长度
maxlength:最多可以输入的字符数
OK，看代码。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/05a320a23a42a07a0d281480673834bb18efc18f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
如图所示，为网页的效果。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/d3c39889a146b7b157c1d70ec77c34b33d41358c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
三.添加密码字段
密码字段是一种特殊的字段，要知道，密码无论你输入什么，都是“*”显示的，不然很容易本人看到不是。
OK，在上一步的技术上，添加密码字段。
input name="passwd1" type="password" value="heihei" size="20" maxlength="20">
name:同上
type:代表密码字段
value:同上
size:同上
maxlength:同上。
（OK,后续这些意思一样的字段，就不再单独列出了）
看代码
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/023cff37c97622bcb9fd67d4a05fd5460496288c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页效果。
要知道，我输入的默认值为“heihei”,那么按理说应该显示“heihei”才对，但是因为密码文本只显示“*”,所以最终显示的为6个星。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/f591ab03c8d246fe89766a30b8bf3bef344f1e8c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
四.添加提交按钮
提交按钮的做用是来提交的......好像废话
总之，单击提交按钮，就可以实现表单内容的提交啦。
input name="button1" type="submit" value="提交">
value：显示该按钮的名称
看网页效果
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/560be432939c2cf7058a74aa452c5b1b1fde128c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
五.添加重置按钮
顾名思义，重置。
input name="reset1" type="reset" value="重置">
看代码
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/a1780d1fceecd3d98d4d5a77679959430501088c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页效果
我在姓名和密码随便说输入一些东西。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/054056fe1e425d6be8e9e19a11883913e9e5008c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
点击重置后，重新回到初始状态
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/3852f6e5eceeadbc4d17efc3cd18dfdae53b7b8c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
六.添加单选按钮
这个稍微复杂一点，不再使用上面的代码了，重新写一个。
性别：
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：只有一个可以带这个参数，其他的都不可以。他表示默认选择。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/edafb3bcbe2f4770b32077696f3b3b860321798c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看代码的网页效果
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/4759c1dae43b3b86fb19e7e4185653bbf920758c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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设置为不一样
看代码的网页效果
3个选项我都可以选择，这就不是单选按钮了。因为名字设置的不同，所以计算机认为这3个各自都是一个单选按钮字段，所以结果显而易见。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/92174dbbf82064fb693399928e6104a354e96f8c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
七.添加复选框
复选框和单选按钮不同。
单选按钮，只能挑选一个选择，而复选框则是想选择几个，就选择几个。
看例子：
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可以随意制定，想有多少就有多少。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/586bfdefe0781431d58f9adfdc6699cf0353628c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页的效果
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/031231632385e036f0a8ef5bb8e039723c035a8c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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
看代码效果
一样可以随意点，可以多选，所以，名字无所谓。
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/6002c9d4483104ebe89ef7bc092b74ee1d324e8c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
八.添加下拉菜单
主要是通过select>和option>来实现。
select>用来表明：我一个下拉菜单
option>用来表明:我是下拉菜单里面的选项
所以，一般有一个select>，而又好多option>,而option>是在select>中的。
看代码：
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只有一个
其他的，没什么要说的了
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/506d92f1d8a7263360bd6550c02c56ee7a7f448c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页效果
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/e4b5e2f5ee0d3ace99eedad887e265e7350fbb8c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
九.添加列表项
额，直接看代码。
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；用于规定可同时选择多个选项
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/777f3fc2bbd6e1d052d132d20d254193cfe8af8c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页的效果
![HTML网页制作：[11]插入表单](https://exp-picture.cdn.bcebos.com/cfa9ae04541bd10fb51fa529ba0e1799e82aa78c.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
OK，到这里就说的差不多了，当然，还有很多其他功能，等待着你深入的学习并掌握
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 432 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)