HTML（2）--表单

最新推荐文章于 2024-10-31 15:02:05 发布
最新推荐文章于 2024-10-31 15:02:05 发布
阅读量261 收藏
点赞数
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxyccm/article/details/122921925
版权

页面结构分析

元素名描述
header标记头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面中的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

iframe内联框架

<iframe scr = "path" name = "mainFrame"></iframe>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe内联框架
src:地址
w-h:宽度高度
-->
<iframe src="" name="hello" frameborder="0" width="100px" height="100px"></iframe>

<a href="8页面标签.html" target="hello">点击跳转</a>

</body>
</html>

表单

表单元素属性：

属性说明
type指定元素的类型。text、password、checkbox、radio、reset、file、hidden、image和button，默认为text
name指定表单元素的名称
value元素的初始值，type为radio时必须指定一个值
size指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlengthtype为text或password时，输入的最大字符数
checkedtype为radio或CheckBox时，指定按钮是否被选中

表单初级验证

常用方式：

  • 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="8页面标签.html" method="get">

    <!--文本输入框： input
    password输入时保密
    value="zxy" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30" 文本框的长度
    -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required/></p>
    <p>密码：<input type="password" name="password" required/></p>


    <!--单选框标签
    radio
    value:单选框的值
    name:表示组 同一个才能实现单选 否则等于多选框
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex" checked/>女
    </p>

    <!--多选框 checkbox-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="chat">聊天
        <input type="checkbox" value="game" name="hobby" disabled>打游戏
    </p>

    <!--普通按钮：button
     图像按钮：image
     提交按钮：submit
     重置按钮：reset
     -->
    <p>按钮：
        <input type="button" name="btn1" value="点击">
     
    </p>

    <!--下拉框 列表框-->
    <p>国家：

        <select name="列表名称">
            <option value="选项的值" selected>中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">瑞士</option>

        </select>
    </p>

    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域-->
    <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>

    <!--滑块-->
    <p>滑块：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!--搜索框-->
    <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" value="清空"/>
    </p>


</form>
</body>
</html>
zxy7857
关注
HTML实例--制作表单
zxn200125的博客
10-05 1万+
运用表格和表单基础知识简单制作一个表单 表单制作使用表格来对表单进行排版美化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width...
HTML---表单详解
gaoqiandr的博客
11-17 3841
在前端网页开发中，HTML的基础知识讲解，本文对于用户与网页的交互做出了详细讲解，具体包括用户输入数据，具体点就是用户输入数据的格式，文本，按钮，复选框等等。
HTML表单元素-输入框
前端队长Daotin
11-06 1万+
2、表单元素-输入框输入框使用input标签。<input>标签，根据type属性的不同，会有不同的表现样式。默认type="text"，也就是文本输入框。2.1、文本输入框单行的文本区域，（输入中的换行会被自动去除）。<input type="text" name="username" maxlength="6" readonly="readonly" ...
HTML-简单表单制作
weixin_43614787的博客
11-26 6294
模板 &lt;!DOCTTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; //此处为输入文本格式，避免乱码现象 &lt;title&gt;此处输入内容&lt;/title&gt; &lt;style type="text/css"&
html 表单-复选框
菜鸟吴de博客
09-30 4193
HTML 表单 复选框
HTML（三） -- 表单设计
PUYALEI的博客
04-29 6076
目录1. 基本语法 2. 表单控件2.1 input控件input 常用属性：input type的表单项：2.2 select 控件2.3 textarea控件2.4 label 控件示例演示： 结果展示：示例演示： 结果展示：示例演示： 结果展示：代码演示： 结果展示：
el-form 表单的校验
热门推荐
潇蓝诺依的博客
12-03 2万+
文章目录rules 绑定对象校验数组校验rules 中的关键字说明Typerequiredpatternmin/maxLenenumwhitespacetransformfieldsmessagevalidator rules 绑定 绑定到el-form <template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item labe
HTML5-表单
李刚的学习专栏
08-09 4587
下述内容主要讲述了《HTML5权威指南》第12章关于“表单”。 当使用form提交数据时：在HTML4中，input、button和其他与表单相关的元素必须放在form元素中；在HTML5中，这条限制不复存在。可以将这类元素与文档中任何地方的表单挂钩（通过表单元素的form属性【下述示例3】）。一、制作基本表单示例1：新标签页显示表单结果<!doctype html> <html lang="en"
HTML--表单类的标签
qq_45823118的博客
03-18 9274
表单5.表单元素——checked属性任务描述相关知识代码文件6.表单元素——disabled 属性任务描述相关知识代码文件7.表单元素——label 标签任务描述相关知识代码文件8.表单元素——下拉列表任务描述相关知识代码文件9.表单元素——文本域任务描述相关知识代码文件10.表单元素——提交按钮任务描述相关知识代码文件11.表单元素的综合案例任务描述相关知识代码文件 5.表单元素——checked属性 任务描述 本关任务：创建一组单选框，name属性值为marry，默认选中未婚。 要求：对每一个选项使用
【HTML】-- 用户注册表单
衍生星球的博客
06-11 8202
使用html标签做一个简单的注册表单，下面是一些常用的标签。 button标签：普通按钮，功能代码自定义。 submit：“确定” ，提交到后台。 reset：“取消” ，让表单控件原内容为空。 select标签：下拉选择框。 textarea：多行文本输入框。...
21-综合案例-表单.html
10-07
21-综合案例-表单.html
12_表单-单选框-radio.html
10-09
12_表单-单选框-radio
HTML入门教程4：HTML属性
软考鸭
10-29 885
HTML属性是附加在HTML标签上的额外信息，它们以键值对的形式出现，并放置在标签的起始部分内。这些属性为浏览器提供了额外的指令，以更准确地渲染网页内容。通过本文的介绍，相信大家对HTML属性有了更深入的了解。HTML属性是网页开发中的基础且重要的部分，它们能够极大地增强网页的功能和表现力。在实际开发中，我们应该灵活运用HTML属性，结合CSS和JavaScript等技术，创造出更加丰富和动态的网页内容。同时，也希望大家能够在开发过程中不断学习和探索新的HTML属性，以提升自己的网页开发技能。
HTML入门教程18：HTML类
软考鸭
10-29 302
在HTML中，你使用class属性来为元素分配类名。类名可以是任何你选择的名称，但最好使用能够描述元素用途或样式的名称。类名前面用一个点（.）表示，但在HTML中给元素分配类名时不需要这个点。< div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1833
【代码】炫酷的登录框!(附源码)
HTML 约束验证
liuxiaoqi_123的博客
10-28 812
HTML5引入了表单相关的一些新机制：它为<input>元素和约束验证增加了一些新的语义类型，使得客户端检查表单内容变得容易。基本上，通过设置一些新的属性，常用的约束条件可以无需 JavaScript 代码而检测到；对于更复杂的约束条件的校验可以尝试使用约束验证 API。
4KB原生html实现table下tr的上下次序自由拖动
易查薪
10-27 438
4KB原生html实现table下tr的上下次序自由拖动
HTML && CSS
最新发布
KKTT01的博客
10-31 557
HTML:HyperText Markup Language，超文本标记语言。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言HTML标签都是预定义好的。例如：使用 标签展示标题，使用展示超链接，使用展示图片，展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
Element-UI + Vue 表单验证解决方案
{ min: 2, max: 5, message: '姓名长度在2到5个字符之间', trigger: 'blur' } ], desc: [ { required: true, message: '地址不能为空', trigger: 'blur' } ] } }; } ``` 在上面的例子中，`name`和`desc`字段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值