HTML表单制作以及相关知识点总结

最新推荐文章于 2022-10-06 20:27:27 发布

Endorphin巛舟

最新推荐文章于 2022-10-06 20:27:27 发布

阅读量1k

点赞数 1

分类专栏： HTML 文章标签： html 服务器 javascript css 前端

本文链接：https://blog.csdn.net/Endorphincuan/article/details/127090354

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

没有表单（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="成绩提交"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" name="button" value="注册新用户" onclick="javascript:alert('注册');">

    </form>
</body>
</html>

输出页面如下图：

Endorphin巛舟

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
HTML表单制作以及相关知识点总结

没有表单（form）技术，网站将仅仅是信息的发布者和提供者，用户也只能是网站的浏览者，网站无法与用户进行交互。如果需要通过网站采集用户的有关信息或者用户需要向网站管理人员提供一些信息，除了使用电子邮件之外，最有效的方法就是在网站上设计表单，表单可以让用户在线提交相关信息给服务器。
复制链接

扫一扫