HTML学习知识点大全2-----超详细(各种标签使用讲解及案例)

最新推荐文章于 2024-08-21 20:15:01 发布

X-Adobe

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量303

点赞数 1

分类专栏：学习笔记 HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_50767381/article/details/117933138

版权

学习笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

HTML学习知识点大全2-----超详细(各种标签使用讲解及案例)

4.0 表单标签

表单:
   概念就是用于采集用户输入的数据,向服务器提交
   表单是使用form标签来定义的:
  
  
  表单是由form标签来定义的
form:代表是一个表单
 action:用于表单提交url
 method:表单提交方式:一共7种,
      1. get:
         1.请求参数在地址栏中进行展示,相当于在请求行中(URL)
         2.请求参数长度是有限的
         3.不太安全
      2. post:
        1.请求参数不会在地址栏中,请求参数在请求提中(HTTP协议请求体)
        2.长度是没有限制的
        3.相对比较安全
      注意:
         表单提交时:输入框的name属性是必须要有的,否则无法提交参数

4.1 快速入门

<!--快速入门-->
<form action="26变化的云彩.html" method="post">
   账号: <input type="text" name="username"><br/>
   密码:<input type="password" name="password"><br/>
    <input type="submit" value="登录">
</form>

4.2 表单项标签

4.2.1基本的表单

<!--1.定义表单-->
<form action="#" method="get">
    <!--2.定义表单项-->
    <p>名字:<input type="text" name="name"></p>
    <p>密码:<input type="password" name="password"></p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" name="reset" value="重填">
    </p>
</form>

属性分析

属性	描述
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时,指定按钮是否被选中

表单项及属性

<title>表单项及属性</title>
</head>
<body>

<form action="26变化的云彩.html" method="get"  enctype= "multipart/form-data">
    <!--  type="text" :文本框
      name="username" :表单项名称
      value="用户名":表单项初始值
      size="10":宽度按照字符长度
      maxlength="8":最多能输入字符数-->
    <p>账号:<input type="text" name="username" value="用户名" size="10" maxlength="8"></p>

    <!--密码框
    type="password"
    size="20":按照可输入字符宽度
    -->
    <p>密码:<input type="password" name="pass" size="20"></p>

    <!--单选框
    一对单选框:name属性值必须相同,否则不识别为一对单选框 添加value初始值
    type="radio"
    -->
    <p>
        性别:<input type="radio" name="gender" value="男">男
        <input type="radio" name="gender" value="女" checked>女
    </p>

    <!--复选框
    type="checkbox"
    name属性值也必须保持一致
    -->
    <p>
        爱好:<input type="checkbox" name="hobby" value="game" checked>玩游戏
        <input type="checkbox" name="hobby" value="play" checked>遛狗
        <input type="checkbox" name="hobby" value="swim">游泳
    </p>
    <!--列表框
     <select>定义列表框
         name="city"定义列表框名称  size定义列表框的行数
     <option:定义列表项
        value="":对应列表的初始值
    -->

    <p>
        <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="hangzhou">杭州</option>
            <option value="tianjin">天津</option>
            <option value="zhengzhou">郑州</option>
        </select>
    </p>
    <p>
        <!--按钮
        1.重置按钮:
          type="reset"
          name="reset":按钮名称
          value="reset重置":按钮的初始值
       2.图片按钮
       type="image"
       src:指向本地资源
       3.普通按钮
        type="button"
      4.提交按钮
       type="submit"
        -->
        <input type="reset" name="reset" value="reset重置">
        <input type="image" src="image/logo.jpg">
        <input type="button" name="btn" value="注册">
        <input type="submit" name="sub" value="登录">

        <!--文件框
        指定表单提交文件格式:
        enctype:"multipart/form-data"

        -->
    <p>
    <input type="file" name="files">
    </p>
   <!--邮箱
   type="email"
   会自动校验Email地址格式是否正确
   -->
    <p>
        邮箱:<input type="email" name="email">
    </p>

    <!--数字框
    type="number"
    min:允许最小值
    max:允许的最大值
    step:合法数字间隔
    -->
    <p>
        数字:<input type="number" name="num" min="1" max="100" step="10">
    </p>

    <!--搜索框-->
    <p>
        <input type="search" name="sousuo"><input type="submit" name="sub" value="搜索">
    </p>

</form>

案例：网页邮箱登录页面

表单元素:文本框,密码框,下拉列表,复选框,提交按钮
HTML5结构元素:header section footer等

需求说明:
 制作网易邮箱登录页面
 不需要排版该页面,只需要html5元素结合标签语义化把该页面的结构布局出来即可

<title>网易邮箱登录页面</title>
</head>
<body>
<!--第一步,先把网易邮箱划分结构,该网页分页三部分,上中下结构-->
<!--header头部分分为两部分,左右,左边放logo ,右边放文字-->
<header>
    <!-- 左边logo-->
    <h1><a href="#"><img src="wangyi/163logo.gif" alt="logo"></a></h1>
    <!--右边文字信息-->
    <p>
        <a href="#">免费邮</a>
        <a href="#">企业邮</a>
        <a href="#">VIP邮箱</a>
        <a href="#">帮助</a>
    </p>
</header>
<!--中间的section部分又分为左右结构,左边是图片和一个无序列表,右边是表单-->
<!--左边-->
<section>
    <div>
        <img src="wangyi/imap.jpg" alt="">
        <ul>
            <li>163/126/yeah三大免费邮箱均默认开通</li>
            <li>前面支持Iphone/ipad及Android等系统</li>
            <li>客户端,手机端,实现发送,阅读邮件</li>
        </ul>
        <a href="#">立即同步普通登陆手机号登陆</a>
    </div>
    <!--右边表单-->
    <form action="#" method="get">
        <p>
            用户名:<input type="text" name="username">@163.com
        </p>
        <p>
            密码:<input type="password" name="password">
        </p>
        <p>
            版本:
            <select name="version" id="">
                <option value="">默认</option>
                <option value="1">2021</option>
                <option value="2">2020</option>
                <option value="2">2019</option>
                <option value="4">2018</option>
            </select>
        </p>
        <p>
            <input type="checkbox" name="cbs" value="autoLogin">自动登陆
            <input type="checkbox" name="cbs" value="ssl" checked>SSL
        </p>
        <p>
            <input type="submit" value="登录">
            <input type="submit" value="注册">
        </p>

    </form>
</section>
<!--底部footer-->
<footer>
    <img src="wangyi/netease_logo.gif" alt="">
    <a href="#">关于网易</a>
    <a href="#">免费邮</a>
    <a href="#">官方博客</a>
    <a href="#">客户服务</a>
    <a href="#">隐私政策</a>
    <a href="#">公司版权所有&copy;2015-2021</a>
</footer>

</body>

表单的高级应用

隐藏域
只读
禁用

<!--隐藏域
有的时候需要给服务器提交一些数据,但是这些数据有没有必要在页面上进行展示
-->
<form action="11图片标签.html">
<input type="hidden" value="666" name="userid">
<input type="submit" value="注册">
<!--只读
只可以观看,不可以修改
-->
    <input type="text" name="name" value="张三" readonly>
<!--禁用-->
    <input type="text" name="user" disabled>

</form>

表单的初级验证

好处:
  1.减轻服务器压力
  2.保证数据的可行性和安全性
  3.让代码更加健壮
  placeholder
  required
  pattern

placeholder

input类型的文本,用于提示的信息
可以描述文本框期待用户输入的数据
提示语默认显示,当文本框输入数据后消失
适用于input标签:text,search,url,email,password等类型
<input type="text" name="username" placeholder="请输入用户名">

required

规定了文本框填写的内容不能为空,否则就不允许用户提交表单
适用于input标签有:text,password,search,url,email,number,checkbox,radio,file等类型
<input type="text" name="user" required>
    <input type="submit" value="提交">

pattern

用户输入的内容必须符合正则表达式所规定的规则,否则不允许提交表单
<input type="text" name="person" pattern="^1[358]\d{9}">

案例：制作QQ注册页面验证

<title>注册页面表单验证</title>
</head>
<body>
<img src="qq/bg_chs.png" alt="">
<h3>注册账号</h3>
<form action="#" method="get">
    <p>
        <label for="username">昵称</label>
        <!--\w:字符
      \u4E00-\u9FA5:中文
      {4,10}:最少4位,最多10位-->
        <input type="text" name="username" id="username" required pattern="[-\w\u4E00-\u9FA5]{4,10}">
        <sapn>长度4-10个字符</sapn>
    </p>
    <p>
        <lable for="password">密码</lable>
        <!--\d:0-9数字
        A-Za-z:单词字符
        {6,16}:最少6位,最多16位-->
        <input type="password" name="password" id="password" required pattern="[\dA-Za-z]{6,16}">
        <span>长度6-16个字符</span>
    </p>
    <p>
        <label for="psw1">确认密码</label>
        <input type="password" placeholder="请输入确认密码" name="psw1" id="psw1" required pattern="[\dA-Za-z]{6,16}">
        <span>长度6-16个字符</span>
    </p>
    <p>
        <label for="phone">手机号</label>
        <input type="tel" id="phone" placeholder="请输入手机号" name="phone" required pattern="1[3578]\d{9}">
    <span>长度11位整数</span>
    </p>
    <p>
        <label for="email">邮箱</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        <span>填写邮箱正确格式</span>
    </p>
    <p>
        <label for="age">年龄</label>
        <input type="text" id="age" name="num" required pattern="\d|[1-9]\d|1[0-2]\d">
    </p>
    <p>
        <input type="image" src="qq/btn.bmp">
    </p>


</form>


</body>
</html>

案例：注册页面

<!--form表单加上table表格进行完成制作-->
<form action="#" method="get">
    <table border="1px soild" align="center" width="500">
        <tr>
            <td>
                <label for="username">用户名</label>
            </td>
            <td>
                <input type="text" name="username" id="username">
            </td>
        </tr>
        <tr>
            <td>
                <lable for="password">密码</lable>
            </td>
            <td>
                <input type="password" name="password" id="password">
            </td>
        </tr>
        <tr>
            <td>
                <label for="email">Email</label>
            </td>
            <td>
                <input type="email" name="email" id="email">
            </td>
        </tr>
        <tr>
            <td>
                <label for="name">姓名</label>
            </td>
            <td>
                <input type="text" name="name" id="name">
            </td>
        </tr>
        <tr>
            <td>
                <label for="phone">手机号</label>
            </td>
            <td>
                <input type="text" name="phone" id="phone">
            </td>
        </tr>
        <tr>
            <td>
                <label for="sex">性别</label>
            </td>
            <td>
                <input type="radio" name="sex" value="man" id="sex" checked>男
                <input type="radio" name="sex" value="wuman" checked>女
            </td>
        </tr>
        <tr>
            <td>
                <label for="data">出生日期</label>
            </td>
            <td>
                <input type="date" id="data" name="birthday">
            </td>
        </tr>
        <tr>
            <td>
                <label for="checkcode">验证码</label>
            </td>
            <td>
                <input type="text" name="check" id="checkcode">
                <img src="zhuce/verify_code.jpg" alt="">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="注册">
            </td>
        </tr>


    </table>


</form>

至此HTML的一些重点的知识点和案例就已经更新完毕了，当然在后面博主也会更新一些CSS的知识点学习心得笔记，有需要的同学还可以点点关注哟！

X-Adobe

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习知识点大全2-----超详细(各种标签使用讲解及案例)

HTML学习知识点大全2-----超详细(各种标签使用讲解及案例)4.0 表单标签表单: 概念就是用于采集用户输入的数据,向服务器提交表单是使用form标签来定义的: 表单是由form标签来定义的form:代表是一个表单 action:用于表单提交url method:表单提交方式:一共7种, 1. get: 1.请求参数在地址栏中进行展示,相当于在请求行中(URL) 2.请求参数长度是有限的 3.不太
复制链接

扫一扫