HTML6之表单

最新推荐文章于 2024-05-14 11:19:40 发布

fazem

最新推荐文章于 2024-05-14 11:19:40 发布

阅读量46

点赞数

分类专栏： HTML 文章标签： html5 前端开发语言

本文链接：https://blog.csdn.net/fazem/article/details/134188677

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LC的媒体元素</title>
<!--    音频和视频
src 资源路径
controls 控制条 不加什么都看不见
autoplay 自动播放-->
</head>
<body>
<header> 网页头部</header>

<section>网页主题</section>

<footer>网页脚部</footer>
<!--
iframe 内敛框架
src 地址
w-h 宽度高度
name ：框架标识名
iframe 是一个内置框，a标签是跳转-->
<iframe src="https://www.bilibili.com" frameborder="0" width = "1100px" height = "800px"></iframe>
<iframe src="" name = "hello" frameborder="0"></iframe>
<a href="First_html.html" target="hello">点击我跳转页面</a>
</body>
</html>

表单

<!--表单form
action 表单提交的位置，可以是表单也可以是一个请求处理地址
method post get 提交方式
get 方式提交我们能在url中看见我们提交的信息(账号密码)，不安全高效
post方式提交 比较安全可以传输大文件-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LC的表单</title>

</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置，可以是表单也可以是一个请求处理地址
method post get 提交方式
get 方式提交我们能在url中看见我们提交的信息(账号密码)，不安全高效
post方式提交 比较安全可以传输大文件-->
<form action="First_html.html" method="get">
<!--文本输入框 ;input type="text"-->
<p><input type="text" name = "username"></p>
<!--密码框 input type="password"-->
<p><input type="password" name="pwd"></p>
<p><input type="submit"><input type="reset"></p>
</form>
</body>
</html>

初始界面

基本表单元素

get方式提交不安全，网址有账号密码信息

post方法提交相对安全，网址隐藏信息，但可通过数据抓包显现，这时候就要用到数据加密的方法

1，type

指定元素类型，text,password,checkbox ,radio , submit , reset , file , hidden , image , button ，默认为text

2,name

指定表单元素名称

3，size

指定表单元素的初始宽度。

4，maxlength

type为text或password时，输入的最大字符数

5，checked

type为radio或checkbox时，指定按钮是否被选中

<!--设置成同一个组，不然都能勾选-->
    <p>性别:
    <input type="radio" value="boy" name = "sex">男
    <input type="radio" value="girl" name = "sex">女</p>

value 初始值
size 文本框长度-->

单选框标签

input type = "radio"

value:初始值

name:表示组

多选框checkbox


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

按钮

<p>按钮:
    <input type="button" name = "btn1" value="点我">
    <input type="image" src="resource/image/head.webp"></p>

图片按钮，可跳转

下拉框

<!--    下拉框,列表框
option 子选项 
selected 默认值-->
  <p> 国家: <select name="列表名称" id="LC">
        <option value="选项的值">中国</option>
        <option value="选项的值">India</option>
        <option value="选项的值" selected>America</option>
        <option value="选项的值">Japan</option>
</select></p>

文本域

<!--    文本域
cols rows 行列-->
    <p>反馈:
        <textarea name="textarea" id="1" cols="30" rows="10"></textarea></p>

文件域

<!--    文件域-->
    <input type="file" name = "files">
    <input type="button" value="上传" name="upload">

所以的input标签，所有的表单元素都需要name属性，用键值对上传东西

功能属性

<!--    邮件验证-->
    <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="1" step="10">
    </p>
<!--    滑块-->
    <input type="range" name = "voice" max="100" min="0" step="2">
<!--    搜索框-->
    <p>搜索框:
        <input type="search" name="search"></p>

具有基本验证功能

应用属性

只读 readonly

写在定义之中，不能被修改

disabled 禁用,hidden 隐藏域

表单初级验证

<!--    表单初级验证-->
<!--placeholder 提示信息用于输入框-->
<!--    required 非空-->
<!--    pattern正则表达式-->

fazem

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML6之表单

LC的媒体元素网页头部网页主题网页脚部
复制链接

扫一扫

专栏目录