一、知识点

1、表单的作用：

信息的收集
数据的验证
在线考试
调查问卷

2、表单的构成

提示性文字：提示用户如何操作（一般由placeholder属性完成）
表单域：相当于一个容器，包含若干表单控件
表单控件：具体的功能项（按钮，下拉列表，输入框等）

3、表单域

表单内容

</form>

4、表单控件

（1）input：输入框。都有value属性，通过用户输入信息将value属性的值提交给远程服务器并保存。

单行文本框：<input type="text" id=" " value=" " placeholder="提示信息" >
密码框：<input type="password" placeholder="提示信息">
数字输入框：<input type="number> （input后面的属性如上）
日期输入框：<input type="date">
颜色输入框：<input type="color">
文件选择框（通常用于上传文件）：<input type="file" >
单选按钮：<input type="radio" name="按钮名称" checked> 文本（check是让表单进入后先默认选择此选项 name值相同则是让此文本选项为单选，不可同时选择相同name值的选项）
复选按钮：<input type="checkbox" value="按钮显示出来的内容" id=" "> （此处的value表示的事按钮显示出来的文本内容）
提交按钮：<input type="submit" value="按钮上显示出来的内容"> （必须放在<form></form>中有效）
重置按钮：<input type="reset" value="按钮上显示出来的内容"> （必须放在<form></form>中有效）
普通按钮：<input type="button" value="按钮上显示出来的内容">

（2）select：下拉列表

</select>

（3）textarea：文本框（多行文本输入框，用户可以调节放大缩小）

二、表单制作

代码：

<body><font color="red" face="" size="5"><p style="text-align: center;">用户注册表单</p>     /*标题*/</font><hr color="black" width="1000" size="2">       /*水平分割线*/<form action="#" method="GET">                 /*后端服务器*/<table style="text-align: center;">            /*创建一个表格,将内容设置为居中*/<tr><td><label>用户名：</label></td><td style="text-align: left;" width="500"><input type="text" placeholder="请输入用户名"></td><td><font color="red" size="1">用户名长度为4-16个字符</font></td></tr><tr><td><label>密&nbsp;&nbsp;&nbsp;码：</label></td><td style="text-align: left;"><input type="password" placeholder="请输入密码"></td><td><font color="red" size="1">密码长度为6个字符</font></td></tr><tr><td style="text-align: center;" width="400"><label>确认密码：</label></td><td style="text-align: left;"><input type="password" placeholder="请确认密码"></td><td><font color="red" size="1">重复密码</font></td></tr><tr><td><label>性别：</label></td><td style="text-align: left;"><input type="radio" name="sex" id="r1" value="1" checked>  /*单选按钮*/<label for="r1">男</label><input type="radio" name="sex" id="r2" value="0"><label for="r2">女</label></td></tr><tr><td><label> 出生日期：</label></td><td style="text-align: left;"><input type="date"></td></tr><tr><td><label>爱好：</label></td><td style="text-align: left;"><input type="checkbox" value="体育" id="ch1">    /*复选按钮*/<label for="ch1">游泳</label><input type="checkbox" value="旅游" id="ch2"><label for="ch2">旅游</label><input type="checkbox" value="音乐" id="ch3"><label for="ch3">音乐</label><br><br><input type="checkbox" value="影视" id="ch4"><label for="ch4">影视</label><input type="checkbox" value="追星" id="ch5"><label for="ch5">追星</label><input type="checkbox" value="写作" id="ch6"><label for="ch6">写作</label></td><td><font color="red" size="1">至少选择三项</font></td></tr><tr><td><label>个人介绍：</label></td><td style="text-align: left;"><textarea cols="20" rows="5"></textarea></td></tr><tr><td><label>验证码：</label></td><td style="text-align: left;"><input type="number" placeholder="请输入验证码"><label>791216</label></td><td><font color="red" size="1">请输入验证码</font></td></tr><tr rowspan="3" style="text-align: right;"><td ><input type="file"></td></tr></table><hr color="black" width="1000" size="2"><table><tr rowspan="3" style="text-align: right;">  /*此处rowspan是使单元格跨行*/<td width="1100"><input type="submit" value="确认">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"></td></tr></table></form>
</body>

表单制作结果：

这是最基础的表单制作，较为简单。可以根据情况对表单进行背景图片或颜色以及图片的添加，并将表单完善。

三、总结

此处的表单制作用到了很多HTML的表单控件，同时需要将这些控件与前面学习的其他文本控件联系起来使用才能使表单更加全面完善。

HTML基础之表单制作相关推荐

HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
推荐使用什么样的平台表单制作工具好？
在办公自动化迅猛发展的今天,传统的表单制作工具已经不能满足各行各业的生产需求,引用专业的低代码开发平台表单制作工具可以助力企业提高作业协作效率.那么,什么平台的表单制作工具可以实现这一目的?今天,我们 ...
DedeCMS自定义表单制作和调用办法
http://down.chinaz.com/try/201112/1471_1.htm 在很多建站需求中,需要一些额外的表单供前台用户提交,以便于收集.统计.分析及处理更多的数据,比如:在线订单.在 ...
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
mysql 自定义表单_DedeCMS自定义表单制作和调用办法
在很多建站需求中,需要一些额外的表单供前台用户提交,以便于收集.统计.分析及处理更多的数据,比如:在线订单.在线报名等一些常见的互动应用. dedecms自定义表单调用先说怎么调用自定义表单吧,因为 ...
Django基础(11): 表单集合Formset的高级用法详解
Formset(表单集)是多个表单的集合.Formset在Web开发中应用很普遍,它可以让用户在同一个页面上提交多张表单,一键添加多个数据,比如一个页面上添加多个用户信息.今天小编我就介绍下Djang ...
HTML用＜form＞表单制作个人简历
在HTML表单制作一张个人简介源代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset=&quo ...
Web 网页求职兼职表单制作
Web 网页求职兼职表单制作 1. 表头 2. 个人信息 3. 求职意向 4. 自我评价 5. 完整代码如下结束语 1. 表头 <!-- align 文字位置 center 居中.left 左 ...
企服云——免费在线专业表单制作问卷调查平台
企服云是江苏卓易信息科技股份有限公司(简称"卓易信息",股票代码:688258)根据多年问卷调查经验开发的一款专为个人或企业用户提供专业易用的问卷.表单和测评的创建.发布.管理.收 ...
【前端基础】表单标签/提交
[前端基础]表单标签/提交表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码小结表单标签学习目标能够知道表 ...

HTML基础之表单制作