HTML5重点内容详解全教程

最新推荐文章于 2024-05-06 13:33:37 发布

@睡不醒的每天@

最新推荐文章于 2024-05-06 13:33:37 发布

阅读量259

点赞数

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

本文链接：https://blog.csdn.net/m0_67929156/article/details/125121687

版权

前端html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML概要

本文主要讲解html重点知识点和应用

在这里插入图片描述
学习阶梯：结构化语言–>表现化语言---->行为化语言

表单提交的2种方式

1、post提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的表单</title>
</head>
<body>
<!--
action :表单提交的地址
method:提交的方式：get和post
post和get区别：
post：安全---不显示账号和密码
get：不安全---显示密码和账号
--->
<form action="我的.html" method="post">
    <p>
    账号：<input  type="text"   name="username"/>
    </p>
  <p>
    密码:<input type="password" name="pass">
  </p>
<p>
    <input type="submit">
    <input type="reset">
</p>

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

2、get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的表单</title>
</head>
<body>
<!--
action :表单提交的地址
method:提交的方式：get和post
post和get区别：
post：安全---不显示账号和密码
get：不安全---显示密码和账号
--->
<form action="我的.html" method="get">
    <p>
    账号：<input  type="text"   name="username"/>
    </p>
  <p>
    密码:<input type="password" name="pass">
  </p>
<p>
    <input type="submit">
    <input type="reset">
</p>
</form>
</body>
</html>

表单的常用元素

</p><!-- typy的类型：
       单选框：radio
      -->
    性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="gir" name="sex"/>女
    <!-- typy的类型：
           多选框：type="checkbox"     -->
<p>
    爱好:
    <input type="checkbox" value="aa" name="AA">睡觉
    <input type="checkbox" value="bb" name="BB">吃饭
    <input type="checkbox" value="cc" name="CC">学习
</p>
    <!--   input type="button"
          input type="image"
   -->
    <p>
  按钮：
        <input type="button" value="按钮">
        <input type="image" src="../red/img/下载.png">
    </p>
    <!-- 文件上传--->
    <p>
        <input type="file" value="files">
        <input type="submit" value="上传" name="name">
    </p>
<p>
    <input type="submit">
    <input type="reset">

</p>

表单的应用

隐藏–hidden

 密码:<input type="password" name="pass"  value="1234" hidden>

结果： hidden隐藏属性
在这里插入图片描述

禁用—disabled

     <input type="radio" value="boy" name="sex" disabled/>男
    <input type="radio" value="gir" name="sex"/>女

结果：表单添加disabled（禁用属性）后，无法选择
在这里插入图片描述

只读----readonly

<p>

    账号：<input  type="text"   name="username" value="admin" readonly/>
    </p>

结果：readonly只读属性添加后，无法置空
在这里插入图片描述

滑动----range

<p>
 音量：
<input type="range" name="void" maxlength="10" step="1" >


</p>

结果：
在这里插入图片描述

搜索框–search

搜索框：
    <input type="search"  name="search">

结果：
在这里插入图片描述

表单的初级验证

提示信息----placeholder

<p>
账号：<input  type="text"   name="username" value="admin" placeholder="请输入账号"/> 
</p>
 <p>
 密码:<input type="password" name="pass"  value="1234" placeholder="请输入密码"/>
</p>

在这里插入图片描述

非空判断–required

<p>

    账号：<input  type="text"   name="username" value="admin" placeholder="请输入账号" required/>
    </p>
    <p>
    密码:<input type="password" name="pass"  value="1234" placeholder="请输入密码" required/>

   </p>