表 单 2

最新推荐文章于 2024-10-30 20:01:39 发布
最新推荐文章于 2024-10-30 20:01:39 发布
阅读量106 收藏
点赞数
分类专栏： HTML 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46423017/article/details/126262190
版权

列表框文本域和文件域

文本域

  • cols="50" 行
  • rows="10" 列

文件域

  • input type="file" name="files"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
form 表单
action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post get 提交方式
  get 方式提交：可以再URL中看到我们提交的信息，不安全，高效
  post ：比较安全，传输大文件
-->
<form action="first.html" method="post">
    <!--

    文本框
    value="haha"    默认初始值
    maxlength="8"   最长能写几个字符
    size="30"       文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="haha" maxlength="8"/></p>
    <!--
    密码框
    input type="password"
     -->
    <p>密码：<input type="password" name="pwd"/></p>
    <!--
    单选框标签
    input type="radio"
    value : 单选框的值
    name: 表示组
    -->
    <p>
        <input type="radio" value="man" name="sex" checked/>男
        <input type="radio" value="woman" name="sex"/>女
    </p>

    <!--
    多选框
    type="checkbox"
    -->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby" checked/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>
    <!--
    按钮
    input type="button" 普通按钮
    input type="image"  图片按钮
    input type="submit" 提交按钮
    input type="reset"  重置
    -->
    <p>
        按钮：
        <input type="button" value="点击变长" name="but1"/>
        <!--<input type="image" src="../resource/img/5efaffbac96db.jpg"/>-->
    </p>

    <!--
    下拉框，列表框
    -->
    <p>
        国家：
        <select name="country">
            <option value="1" selected>中国</option>
            <option value="2">美国</option>
            <option value="3">瑞士</option>
            <option value="4">印度</option>
        </select>
    </p>
    <!--
    文本域
    cols="50" 行
    rows="10" 列
    -->
    <p>
        反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--
    文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files"/>
        <input type="button" value="上传" name="upload"/>
    </p>
    <p>
        <input type="submit"/>
        <input type="reset"/>
    </p>
</form>
</body>
</html>

输出结果：

 

 

搜索框滑动和简单验证

（1）搜索

  •     input type="search"

 （2）滑块

  •     input type="range"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
form 表单
action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post get 提交方式
  get 方式提交：可以再URL中看到我们提交的信息，不安全，高效
  post ：比较安全，传输大文件
-->
<form action="first.html" method="post">
    <!--

    文本框
    value="haha"    默认初始值
    maxlength="8"   最长能写几个字符
    size="30"       文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="haha" maxlength="8"/></p>
    <!--
    密码框
    input type="password"
     -->
    <p>密码：<input type="password" name="pwd"/></p>
    <!--
    单选框标签
    input type="radio"
    value : 单选框的值
    name: 表示组
    -->
    <p>
        <input type="radio" value="man" name="sex" checked/>男
        <input type="radio" value="woman" name="sex"/>女
    </p>

    <!--
    多选框
    type="checkbox"
    -->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby" checked/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>
    <!--
    按钮
    input type="button" 普通按钮
    input type="image"  图片按钮
    input type="submit" 提交按钮
    input type="reset"  重置
    -->
    <p>
        按钮：
        <input type="button" value="点击变长" name="but1"/>
        <!--<input type="image" src="../resource/img/5efaffbac96db.jpg"/>-->
    </p>

    <!--
    下拉框，列表框
    -->
    <p>
        国家：
        <select name="country">
            <option value="1" selected>中国</option>
            <option value="2">美国</option>
            <option value="3">瑞士</option>
            <option value="4">印度</option>
        </select>
    </p>
    <!--
    文本域
    cols="50" 行
    rows="10" 列
    -->
    <p>
        反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--
    文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files"/>
        <input type="button" value="上传" name="upload"/>
    </p>
    <!--
    邮件验证
    -->
    <p>
        邮箱：
        <input type="email" name="email"/>
    </p>
    <!--
    url
    -->
    <p>
        url：
        <input type="url" name="url"/>
    </p>
    <!--
    数字
    -->
    <p>
        数字：
        <input type="number" name="num" max="100" min="0" step="10"/>
    </p>
    <!--
    滑块
    input type="range"
    -->
    <p>
        滑块：
        <input type="range" name="voice" max="100" min="0" step="1"/>
    </p>
    <!--
    搜索
    input type="search"
    -->
    <p>
        搜索：
        <input type="search" name="search"/>
    </p>

    <p>
        <input type="submit"/>
        <input type="reset"/>
    </p>
</form>
</body>
</html>

输出结果：

 

表单的应用

（1）隐藏域 hidden

 

（2）只读 readonly

 

（3）禁用 disabled

 

（4）增强鼠标可用性

 例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
form 表单
action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post get 提交方式
  get 方式提交：可以再URL中看到我们提交的信息，不安全，高效
  post ：比较安全，传输大文件
-->
<form action="first.html" method="post">
    <!--

    文本框
    value="haha"    默认初始值
    maxlength="8"   最长能写几个字符
    size="30"       文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="admin" readonly/></p>
    <!--
    密码框
    input type="password"
     -->
    <p>密码：<input type="password" value="123456" name="pwd" hidden/></p>
    <!--
    单选框标签
    input type="radio"
    value : 单选框的值
    name: 表示组
    -->
    <p>
        <input type="radio" value="man" name="sex" disabled/>男
        <input type="radio" value="woman" name="sex"/>女
    </p>

    <!--
    多选框
    type="checkbox"
    -->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby" checked/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>
    <!--
    按钮
    input type="button" 普通按钮
    input type="image"  图片按钮
    input type="submit" 提交按钮
    input type="reset"  重置
    -->
    <p>
        按钮：
        <input type="button" value="点击变长" name="but1"/>
        <!--<input type="image" src="../resource/img/5efaffbac96db.jpg"/>-->
    </p>

    <!--
    下拉框，列表框
    -->
    <p>
        国家：
        <select name="country">
            <option value="1" selected>中国</option>
            <option value="2">美国</option>
            <option value="3">瑞士</option>
            <option value="4">印度</option>
        </select>
    </p>
    <!--
    文本域
    cols="50" 行
    rows="10" 列
    -->
    <p>
        反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--
    文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files"/>
        <input type="button" value="上传" name="upload"/>
    </p>
    <!--
    邮件验证
    -->
    <p>
        邮箱：
        <input type="email" name="email"/>
    </p>
    <!--
    url
    -->
    <p>
        url：
        <input type="url" name="url"/>
    </p>
    <!--
    数字
    -->
    <p>
        数字：
        <input type="number" name="num" max="100" min="0" step="10"/>
    </p>
    <!--
    滑块
    input type="range"
    -->
    <p>
        滑块：
        <input type="range" name="voice" max="100" min="0" step="1"/>
    </p>
    <!--
    搜索
    input type="search"
    -->
    <p>
        搜索：
        <input type="search" name="search"/>
    </p>


    <!--
    增强鼠标可用性
    -->
    <p>
        <label for="mark">点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>
        <input type="submit"/>
        <input type="reset"/>
    </p>
</form>
</body>
</html>

表单初级验证

常用方式：

  • placeholder 提示信息
  • required 非空判断
  • pattern 正则表达式

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
form 表单
action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post get 提交方式
  get 方式提交：可以再URL中看到我们提交的信息，不安全，高效
  post ：比较安全，传输大文件
-->
<form action="first.html" method="post">
    <!--

    文本框
    value="haha"    默认初始值
    maxlength="8"   最长能写几个字符
    size="30"       文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="admin" placeholder="请输入用户名" required/></p>
    <!--
    密码框
    input type="password"
     -->
    <p>密码：<input type="password" value="123456" name="pwd" hidden/></p>
    <!--
    单选框标签
    input type="radio"
    value : 单选框的值
    name: 表示组
    -->
    <p>
        <input type="radio" value="man" name="sex" disabled/>男
        <input type="radio" value="woman" name="sex"/>女
    </p>

    <!--
    多选框
    type="checkbox"
    -->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby" checked/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>
    <!--
    按钮
    input type="button" 普通按钮
    input type="image"  图片按钮
    input type="submit" 提交按钮
    input type="reset"  重置
    -->
    <p>
        按钮：
        <input type="button" value="点击变长" name="but1"/>
        <!--<input type="image" src="../resource/img/5efaffbac96db.jpg"/>-->
    </p>

    <!--
    下拉框，列表框
    -->
    <p>
        国家：
        <select name="country">
            <option value="1" selected>中国</option>
            <option value="2">美国</option>
            <option value="3">瑞士</option>
            <option value="4">印度</option>
        </select>
    </p>
    <!--
    文本域
    cols="50" 行
    rows="10" 列
    -->
    <p>
        反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--
    文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files"/>
        <input type="button" value="上传" name="upload"/>
    </p>
    <!--
    邮件验证
    -->
    <p>
        邮箱：
        <input type="email" name="email"/>
    </p>
    <!--
    url
    -->
    <p>
        url：
        <input type="url" name="url"/>
    </p>
    <!--
    数字
    -->
    <p>
        数字：
        <input type="number" name="num" max="100" min="0" step="10"/>
    </p>
    <!--
    滑块
    input type="range"
    -->
    <p>
        滑块：
        <input type="range" name="voice" max="100" min="0" step="1"/>
    </p>
    <!--
    搜索
    input type="search"
    -->
    <p>
        搜索：
        <input type="search" name="search"/>
    </p>


    <!--
    增强鼠标可用性
    -->
    <p>
        <label for="mark">点我试试</label>
        <input type="text" id="mark">
    </p>

    <!--
    正则表达式
    -->
    <p>
        手机号码
        <input type="text" name="phoneNo"
               pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$">
    </p>

    <p>
        <input type="submit"/>
        <input type="reset"/>
    </p>
</form>
</body>
</html>

输出结果：

1、placeholder 提示信息

 

2、required 非空判断

 

siiove
关注
专栏目录
HTML-表单（非常详细）
南劲竹的博客
08-31 7万+
  表单语法 &lt;form method="post"（规定如何发送表单数据 常用值：get|post） action="result.html"&gt;（表示向何处发送表单数据） &lt;p&gt; 名字：&lt;input name="name" type="text" &gt; &lt;/p&gt; &lt;p&
HTML学习（5）
qq_45890029的博客
08-10 119
表单 <!-- action：表单提交的位置 可以是网站也可以是一个请求处理地址 method：get post 提交方式 get:可以在url中看到提交的信息 不安全 高效 post：不可以在url中看到提交的信息 比较安全 可以传输大文件 --> <form action="page.html" method="get"> <h2>注册</h2> <p>用户名：<input type="text" name="user
db2导出表
weixin_38759773的博客
12-27 4867
导出db2所有表数据为csv
数据库单表查询
qq_49392169的博客
01-25 4483
1.查询一个表内的所有数据 select * from gays; 查询gays这张表的所有字段的所有内容。 2.查询某张表的某个字段 select name from gays; 查询gays这张表的name字段的所有内容。 3.带条件查询 select * from gays where id = 3; 查询gays这张表的id等于3的所有字段的信息。 返回的是一条数据。 select * from gays where id in(1,2); select * fr
单循环链表（简称循环链表）
一个搬运知识的笨小孩
07-25 5090
循环链表（从任一结点出发，访问到链表全部结点） 访问终端结点的时间复杂度 O(n)O(n)O(n) 的循环链表形式 访问尾结点的时间复杂度 O(1)O(1)O(1) 的循环链表形式 这种形式访问开始结点和终端结点都很方便均为 O(1)O(1)O(1) 举例： 将两个循环链表合并为一个表 表A 表B 表A和表B合并 p = rearA->next; //将指向表A头结点的指针重命名 rearA->next = rearB->next->next; //将指向表B开始结点的指针
mysql单表1000万条_mysql单表千万条数据测试
weixin_39619433的博客
01-19 5835
软件环境：win7，mysql版本5.5，InnoDB存储引擎。硬件环境：普通笔记本，CPU P8700双核2.53GHz，内存3G，5400转机械硬盘1000GB。建了一张表，id列是自增长bigint，再加上其他varchar、datetime型的字段，总共8个字段，通过java生成了insert的sql文件，一共62个文件，每个文件50万行(约88M)，总共3100万行记录(约5.35G)，...
如何制作价目表制作报价单
wanjiawen0260的博客
02-20 3197
"街寻"价目表制作软件，主要为商户与个人提供方便快速的价目发布与展示服务，商户可以登录后台进行价目管理，并选择自己喜爱的模版进行设置，完成后可以直接转发于分享，同时可以通过保存价目二维码进行打印，顾客通过扫一扫快速浏览商品信息价格表。同时提供用户个性化价目表制作定制服务，根据用户的特定需求进行定制，关注“街寻”公众号开始自己的价目表制作旅程。   ...
db2表分区
06-17 1万+
为了提高查询效率，xuy
db2 表空间 缓冲池
荣耀之路
03-30 6148
简介 对于刚涉足 DB2 领域的 DBA 或未来的 DBA 而言，新数据库的设计和性能选择可能会很令人困惑。在本文中，我们将讨论 DBA 要做出重要选择的两个方面：表空间和缓冲池。表空间和缓冲池的设计和调优会对 DB2 服务器的性能产生深远的影响，因此我们将着重讨论这些活动。 在我们的示例中，我们将使用 DB2 V8.1 企业服务器版。大多数示例也适用于低级版本。我们会让您知道
SAP_常用业务数据表2
~ Caesar's wish书屋 ~
03-16 4811
表的要求 表中使用的字段请尽量参照各模块的SAP字段标准使用习惯；    例：“ZXSLRZX销售组织对应的利润中心”中的销售组织应该使用VKORG、利润中心应该使用PRCTR。 根据表的用途，需确定是否属于配置目的、还是业务目的。 配置表的建议： 需要加入MANDT字段 例： “ZQJQD缺件清单”就没有MANDT字段 需提供相应的维护视图； 例：如ZCHECK_MM01工厂和利
mysql单表查询实验总结_mysql 12种 单表查询 总结
weixin_29580123的博客
01-26 2527
一：在之前已经 都写了 12种的单表查询现在 来回顾一下 。mysql 基础1) mysql 数据库作用 管理数据2) mysql 存储结构：数据库：管理 数据库(CRUD)表管理表(CRUD)数据：管理 数据增删改：查询12种 查询 单表查询：mysql 存储结构; 数据库 表 数据 sql 语句2： 管理数据库增加 create database 数据库 default character...
从底层结构开始学习FPGA（2）----LUT查找表
热门推荐
孤独的单刀
05-09 2万+
LUT到底是啥？
DB2误删除表的恢复
aryoyo的博客
01-06 4977
情形： 实例test下的testdb数据库其中TS2表空间有2张表tb1和tb2，在一次全备份后， 误删除了tb2表，如何恢复tb2表，且能不影响和丢失tb1和其他表空间的数据呢？ 第一：循环日志模式，直接恢复到全备份时间点，那么则丢失备份点后的全部数据； 第二：归档日志模式，数据库恢复+rollforward，恢复数据库到备份时间点，并且            前滚到tb2删除时间前，那么则丢失...
DB2 的REORG_学习（2）_表重组
nayanminxing的专栏
06-27 8803
学习完命令之后来看一下表重组，然后再看索引重组哈。 表重组的方法DB2 V8之后有两种不同的表重组的方法： 脱机REORG 联机REORG REORG命令的INPLACE选项指定联机重组。如果未指定此选项，那么将运行脱机REORG。可以通过两种方法来重组表：传统重组（脱机）和原位置重组（联机）。1).缺省行为是脱机重组。 2).要指定联机重组操作，请使用 REORG TABLE 命令的 INPLA
db2表的删除与清空
guanhuazhan的博客
12-23 9396
DROP TABEL <表名> 彻底删除一个表，包括表的定义。 DELETE FROM <表名> 清除表中所有数据，并且记录日志。因为需要记录日志，因此执行速度会相对慢一些，另外要注意的是，如果表较大，为保证删除操作的成功，应考虑是否留有足够大的日志空间。 ALTER TABLE …ACTIVATE NOT LOGGED INITIALLY WITH EMPTY TABLE 以不记日志的方式清除表中的数据。这样不但提高了速度，也减少了日志的生成，并且减少了锁资源的使用。 注意： 1.
【HTML5】html5开篇基础（6）
Easonmax的博客
10-30 773
该标签支持多种视频格式，并提供了一些属性和方法来控制视频的播放。对于autoplay在谷歌中不添加muted是自动播放不了的。标签也支持多种音频格式，并且提供了一些控制音频播放的属性。在学习html5和css3的基础上使我们的前端使用更高级。对于audio中controls和src是最重要的。对于video中controls和src是最重要的。在谷歌中autoplay是禁用的，用不了。在学习html5的基础上更加熟练运用前端。我们通常用MP4，这在所有游览器中通用。学习前端知识，更好的运用它。
计算机毕业设计——ssm基于HTML5的互动游戏新闻网站的设计与实现录像演示2021
weixin_47772925的博客
10-29 315
开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等。计算机毕业设计——ssm基于HTML5的互动游戏新闻网站的设计与实现录像演示2021。计算机毕业设计——ssm基于HTML5的互动游戏新闻网站的设计与实现录像演示2021。
技术资料分享SY8009非常好的技术资料.zip
最新发布
11-02
技术资料分享SY8009非常好的技术资料.zip
STM32操作IIC显示OLED
11-02
请参考我的博客： https://blog.csdn.net/weixin_41011452/article/details/140220717?sharetype=blogdetail&sharerId=140220717&sharerefer=PC&sharesource=weixin_41011452&spm=1011.2480.3001.8118
C语言实现单表替换加密解密程序
"这是一个简单的C语言程序，用于实现单表替换加密和解密。通过用户输入的26个字母作为密钥，程序可以对明文进行加密，生成密文，也可以将密文解密回原文。单表替换是一种基础的密码学方法，它通过一对一的字符替换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值