html - 10.表单

最新推荐文章于 2024-08-17 14:58:02 发布

旧林墨烟

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量180

点赞数 1

分类专栏： html 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_52115456/article/details/119943915

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML表单的使用，包括

摘要由CSDN通过智能技术生成

表单

每次提交会提交整个表单的信息

常用属性：

action : 表单提交的位置，可以是网站，也可以是一个请求处理的地址

method : post和get方式

get表单

url可见：在提交的网页的url栏中可以看到get表单提交的信息，不安全
get请求可以缓存
传输的文件有大小限制
传输效率高

post表单

url可见：在提交的网页的url栏中不可看到post表单提交的信息，较安全
post请求不可缓存
传输地文件没有大小限制
传输效率低

表单元素

文本框：最普通的文本框，可以输入各种内容
密码框：输入后显示**，不能直接看到内容
单选按钮：单选
复选框：多选
列表框：单选，风格不同
按钮：重置按钮、提交按钮、自定义按钮、图片按钮
多行文本域：一个自定义文本域，可自定义文本大小
文件域：上传文件
邮箱：可以验证邮箱格式
网址：可以验证url格式
数字：只能输入数字
滑块：滚动条，可以拉动
搜素框：自带X快速删除内容
隐藏框：不显示，但可以提交值，一般以这种方式提交账号密码
label标签：文本框导航，点击进入特定的文本框

常用属性：

属性	说明
type	指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认为text
name	指定表单元素的名称
value	元素初始值，type为radio时必须选择一个值
size	指定表单元素的初始宽度当type为text或password时，表单元素的大小以字符为单位。对于其它类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否选中
disabled	禁用功能框
readonly	设置只读

表单的初级验证：

常用方式：

placeholder：提示信息
required：非空判断，必填框
pattern：正则表达式

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
    <h4>文本框</h4>
    <input type="text" maxlength="20" size="20" placeholder="请输入用户名">

    <h4>密码框</h4>
    <input type="password" placeholder="请输入密码">

    <h4>单选按钮</h4>
    <input name="sex" type="radio" value="男" checked>男
    <input name="sex" type="radio" value="女">女

    <h4>复选框</h4>
    <input type="checkbox" name="hobby">听音乐
    <input type="checkbox" name="hobby">打篮球
    <input type="checkbox" name="hobby">画图画

    <h4>列表框</h4>
    <select>
        <option value="student" selected="selected">学生</option>
        <option value="teacher">教师</option>
        <option value="parent">家长</option>
    </select>

    <h4>按钮</h4>
    <!--  重新输入按钮  -->
    <input type="reset">
    <!--  提交按钮  -->
    <input type="submit">
    <!--  自定义按钮  -->
    <input type="button" value="自定义">
    <!--  图片按钮  -->
    <input type="image" src="">

    <h4>多行文本域</h4>
    <textarea cols="20" rows="5">初始文本内容</textarea>

    <h4>邮箱</h4>
    <input type="email">

    <h4>地址</h4>
    <input type="url">

    <h4>数字</h4>
    <input type="number" min="0" max="10">

    <h4>滑块</h4>
    <input type="range">

    <h4>搜素框</h4>
    <input type="search">

    <h4>隐藏框</h4>
    <p>内容隐藏了</p>
    <input type="hidden">

    <h4>label用法</h4>
    <label for="t1">点击进入下面文本框</label><br>
    <input id="t1">


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

视图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WHGv23IE-1630004129391)(C:\Users\wuguanghui\AppData\Roaming\Typora\typora-user-images\image-20210826185650542.png)]$

旧林墨烟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html - 10.表单

表单<form></form>每次提交会提交整个表单的信息常用属性：action : 表单提交的位置，可以是网站，也可以是一个请求处理的地址method : post和get方式get表单url可见：在提交的网页的url栏中可以看到get表单提交的信息，不安全get请求可以缓存传输的文件有大小限制传输效率高post表单url可见：在提交的网页的url栏中不可看到post表单提交的信息，较安全post请求不可缓存传输地文件没有大小限制传输效率低表
复制链接

扫一扫