HTML表单制作以及相关知识点总结
没有表单（form）技术，网站将仅仅是信息的发布者和提供者，用户也只能是网站的浏览者，网站无法与用户进行交互。如果需要通过网站采集用户的有关信息或者用户需要向网站管理人员提供一些信息，除了使用电子邮件之外，最有效的方法就是在网站上设计表单，表单可以让用户在线提交相关信息给服务器。
表单这一章中，主要的控件（元素）有:文本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表等等，可以完成各类信息的收集。
- 表单标记：
<form></form>是成对标记，定义了数据采集的范围。
属性有：name-->规定表单名称；action-->规定向何处发送表单数据；method-->规定如何发送表单数据；entype-->规定如何表单数据发送之前如何编码。 - 定义域和域标题：
<fieldset> <legend> </legend> </fieldset>都是成对标记，<legend>规定域标题要位于<fieldset>内，一个form表单里边可以有多个域。 - 单行文本输入框：
<input type="text" name="" maxlength="" size="" value="" >
其中，name定义input元素名称；maxlength规定字段中的最大字符长度；size规定输入字段的宽度（其值小于或等于最大长度）；value规定input元素的默认值。 - 密码输入框：
<input type="password" name="" maxlength="" size="">
属性介绍与单行文本输入框一致，密码输入框会在输入的时候显示为实心圆圈，如图：
- 复选框：
<input type="checkbox" name="" value="" checked="checked">
注意，复选框的每一个选项肯定是不同的，所以name属性的赋值要不同；checked="checked"表示此选项为默认选项。 - 单选按钮：
<input type="radio" name="" value="" checked="checked">
注意，在一组单选按钮中只能选择一个单选按钮，所以所有单选按钮的name属性应该是相同的，但是value属性的取值是不同的。 - 图像按钮：
<input type="image" name="" src="" width="" height="">
src是source的缩写，表示图像的来源,width和height分别规定图片的宽度和高度。 - 提交按钮：
<input type="submit" name="" value="提交" >
提交按钮用于将表单信息提交至服务器进行处理。 - 普通按钮：
<input type="button" value="" οnclick="">
可以通过普通按钮绑定事件代码，实现所需要的功能，οnclick=""内输入绑定事件代码、自定义函数或者直接使用脚本代码。 - 文件选择框：
<input type="file" name="" >
可以选择文件上传。 - 隐藏框：
<input type="hidden" value="">
用户提交表单时，隐藏框的信息也会一起提交到服务器，但是隐藏框在页面中是不可见的。 - 多行文本框输入：
<textarea name="" rows="" cols="" wrap="">
rows和cols分别规定文本区内可见的行数和宽度；wrap规定在提交表单时，文本区域中的文本如何换行，wrap属性值介绍可以看这个文章：(3条消息) 关于标签的wrap属性的解释。_WangErBei的博客-CSDN博客_wrap属性 - 下拉列表框：
<select name="" value="" (multiple)>
<option value="" seclected> 文字信息</option>
<option value="" > 文字信息2</option>
</select>
注意，<select>是成对标签，<option>是单个标签，但是我们建议把它补全，结构更加清晰。
如果输入了multiple属性，就实现了下拉列表多选，默认为单选。
以上是表单相关的元素介绍，下边是我做的一个表单样例，方便大家以例子的形式学习：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单的使用实例</title></head><body><form name="form1" method="post" action="form_action.jsp"><h3>信息收集</h3><fieldset><legend>请填写个人信息</legend><br/>姓名：<input type="text" name="xingming" maxlength="20" size="20"><br/>性别：<input type="radio" name="sex" value="male" checked="checked">男<input type="radio" name="sex" value="female" >女<br/>上传照片：<input type="file" name="file"><br/>密码：<input type="password" name="psw" maxlength="20" size="10"><br/><input type="hidden" name="hidden" value="SE"></fieldset><fieldset><legend>输入成绩</legend>高等数学：<input type="text" size="3"><br>大学物理：<input type="text" size="3"/><br/>掌握的编程语言：<input type="checkbox" name="c1" value="C" checked="checked">C语言<input type="checkbox" name="c2" value="J">JAVA语言<input type="checkbox" name="c3" value="P">Python语言<br/>请选择您的课程：<select name="course" size="1"><option value="s1" selected>ACM程序设计</option><option value="s2">数学建模与数学实验</option><option value="s3">电子设计竞赛</option><option value="s4">互联网+创新创业</option></select><br/>请描述竞赛经历:<br/><textarea name="info" rows="4"cols="30" wrap="physical"></textarea></fieldset><br/><input type="submit" value="成绩提交"/> <input type="reset" value="重置"/> <input type="button" name="button" value="注册新用户" onclick="javascript:alert('注册');"></form>
</body>
</html>输出页面如下图：
HTML表单制作以及相关知识点总结相关推荐
- 从零开始学前端：表单制作 --- 今天你学习了吗？（CSS：Day05）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表格制作 - 今天你学习了吗?(CSS:Day04) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作 有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件 大部分的表单控件都是<input>编写 ...
- DedeCMS自定义表单制作和调用办法
http://down.chinaz.com/try/201112/1471_1.htm 在很多建站需求中,需要一些额外的表单供前台用户提交,以便于收集.统计.分析及处理更多的数据,比如:在线订单.在 ...
- 推荐使用什么样的平台表单制作工具好？
在办公自动化迅猛发展的今天,传统的表单制作工具已经不能满足各行各业的生产需求,引用专业的低代码开发平台表单制作工具可以助力企业提高作业协作效率.那么,什么平台的表单制作工具可以实现这一目的?今天,我们 ...
- html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
- mysql 自定义表单_DedeCMS自定义表单制作和调用办法
在很多建站需求中,需要一些额外的表单供前台用户提交,以便于收集.统计.分析及处理更多的数据,比如:在线订单.在线报名等一些常见的互动应用. dedecms自定义表单调用 先说怎么调用自定义表单吧,因为 ...
- HTML用＜form＞表单制作个人简历
在HTML表单制作一张个人简介 源代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Web 网页求职兼职表单制作
Web 网页求职兼职表单制作 1. 表头 2. 个人信息 3. 求职意向 4. 自我评价 5. 完整代码如下 结束语 1. 表头 <!-- align 文字位置 center 居中.left 左 ...
- 企服云——免费在线专业表单制作问卷调查平台
企服云是江苏卓易信息科技股份有限公司(简称"卓易信息",股票代码:688258)根据多年问卷调查经验开发的一款专为个人或企业用户提供专业易用的问卷.表单和测评的创建.发布.管理.收 ...
最新文章
- 为什么 Java 中“1000==1000”为false，而”100==100“为true？
- 调用个别f5 负载端口为80的vs时，返回值为空的问题
- SQL Server 限制IP登陆（登陆触发器运用）
- 响应格式html,设置响应格式的HTML邮件
- 关于_MSC_VER的说明
- 人生感悟：生活磨练有时也是一种财富
- InnoDB存储引擎介绍-(1)InnoDB存储引擎结构
- 系统安装之十 U盘安装原版win10
- 基于64QAM的LDPC编译码算法
- C#调用AForge实现摄像头录像
- 用正则匹配生成固定格式的随机文本python
- 模型论电子版教材，何处寻？
- Revit获取平面视图参照标高及视图范围
- 可编程SoC(SoPC),什么是可编程SoC(SoPC)
- 寒假算法训练1-J（分棍子，求最长棍子的数量，另外学习map的排序方法）
- idea springboot mybaits扫描不到第三方jar中的mapper
- Windows 10 配置OpenGL ES 3.0 环境
- 人像调色效果Lr预设
- 基于BS结构的高校学生就业信息系统设计与实现
- 深度揭秘腾讯云低功耗广域物联网LPWAN 技术及应用