Web构建表单——form表单元素

最新推荐文章于 2024-03-21 09:31:43 发布

Braveyjc

最新推荐文章于 2024-03-21 09:31:43 发布

阅读量857

点赞数 1

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/Braveyjc/article/details/128455110

版权

一、认识表单

表单在动态网页设计中处于非常重要的地位通过表单可以实现与用户的交互，并采集浏览者的信息。网页中的注册表调查表和留言板都是表单。每个表单都以form开始，以form结束。两个表单之间是组成表单的各个控件，每个控件都有一个name属性，用于提交表单时对数据的识别。

二、表单的组成部分

1、访问者在页面上可以看见并填写的控件、标签和按钮的集合。

2、用于获取信息并将其转化为读取和计算格式的脚本。

三、表单的属性

action	规定向何处提交表单的地址（URL）（提交页面）
method	规定在提交表单时所用的HTTP方法（get、post）
accept-charset	规定在被提交表单中所用的字符集（默认：页面字符集）
autocomplete	规定浏览器自动完成该表单（默认开启）
enctype	规定被提交数据的编码（默认：url-encoded）
name	规定识别表单的名称
novalidate	规定浏览器不验证表单
target	规定action属性中的目标地址

四、表单的控件

radio	单选框
checkbox	复选框
text	文本域
file	文件上传域
password	密码域
submit	提交按钮
reset	重置按钮
button	普通按钮
image	图像域
email/url	电子邮件地址、网页地址
serach	搜索框
color	颜色选择器
range	滑动条
date/month/week/time/datetime	日期和时间选择器
number	数字输入框
hidden	设置隐藏字段

input的一些属性:

checked：只能出现在一个选项中规定该选项默认选中

创建文本区域：

warp规定输入内容大于文本域时显示的方式，soft表示textarea中的文本不换行当使用hard时，textarea中的文本换行（包含换行符），此时必须规定cols属性。

创建选择框：

</option>

</select>

multiple:规定是否多选。

selected规定默认选择该项目

五、对表单元素进行组织

如果表单上很多信息需要填写，可以使用fieleset元素将相关元素组合在一起，使表单更容易理解还可以使用legend元素为每个fieldset提供一个标题（caption），用于描述没个组的目的，有时这些描述还可以使用h1~h6标题用于一组单选按钮

</fieleset>

六、对表单进行验证

表单验证是值在用户提交表单之前确保用户输入的数据是合法的。主要包括：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证。

可以通过pattern属性来实现

七、表单的综合实例

<!DOCTYPE html>
<html >
<head>
</head>
<body>   
    <form>
        <fieldset >
            <legend>筑牢防疫现，健康你我他</legend>
            <p>姓名：<input type="text" autofocus="true" name="username" ></p>
            <p>学号：<input type="text" pattern="{10,}$" value="20"></p>
            <p>类别：<select name="categpry" size="3">
                <option value="stuednt" selected>学生</option>
                <option value="teacher" >教师</option>
                <option value="other">其他</option>
            </select></p>
            <p>体温：<input type="text" name="body temperature"></p>
        </fieldset>    
        <p>测试日期<input type="datetime-local"></p>
        <p>时间段<input type="checkbox" name="morning">上午<input type="checkbox">下午</p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>    
        </body>
</html>

效果图：