提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML5 + CSS3 表单学习笔记（六）

html5css3笔记学习 表单
2023-09-11 14:22:06 时间

表单学习

表单学习(实现简易的登陆界面)

初始表单post和get提交(form)

在这里插入图片描述

表单常用关键词含义及表述
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
get方式提交：外面可以在url中看到外面提交的信息，不安全，高效
post方式提交:比较安全，可以传输大文件
<form action="1.我的第一个网页.html" method="get">
  <p>用户：
    <input type="text" name="username" value="">
  </p>
    <p>密码：
        <input type="password" name="passwd" value="">
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    </p>
</form>

表格元素属性格式

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

单选框(radio)

单选框不允许选项同时选上

  • 组的概念

  • 单选框的 name起到了分组的作用，使在同一组的选项只能选中其中一个

  <p>性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
  </p>

在这里插入图片描述

多选框(checkbox)

   <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">编程
        <input type="checkbox" value="read" name="hobby">阅读
    </p>

按钮(button)

  • 按钮可以使经典按钮形式
  • 也可以以图片做按钮链接
<p>按钮:
        <input type="button" name="btn1"value="点击变长">
        <input type="image" src="../resources/images/1.jpg">
 </p>

在这里插入图片描述

列表框文本域和文件域

  • 列表框文本域 textarea 标签
  • 文件域 file 标签

列表框文本域 (textarea)

<p>反馈：
        <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea>
    </p>

在这里插入图片描述

文件域 (input-file)

   <p>附件上传：
        <input type="file" name="sources">
        <input type="button" name="btn2" value="点击上传">
    </p>

在这里插入图片描述

搜索框滑块和简单验证

  • 归类为 input
表单元素应用
email传入邮件
url传入网址，链接地址
number数字输入框，只允许输入数字
range音量等滑动滑块 有0-100 的比例值
search搜索框
  • 代码呈现
 <!--邮件验证-->
        <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" size="10">
        </p>
 
        <!--滑块-->
        <p>音量：
            <input type="range" name="voice" min="0" max="100" step="2">
        </p>
 
        <!--搜索框-->
        <p>搜索：
            <input type="search" name="search">
        </p>

在这里插入图片描述

表单的应用

表单的应用

  • 隐藏域：hidden
  • 只读：readonly
  • 禁用：disabled

增强鼠标可用性，点击label，光标自动到text上

<!--增强鼠标可用性，点击label，光标自动到text上-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
  • label标签 for 后关键词对应 要跳转索引的 id

表单初级验证

  • 常用方式
    • placeholder：提示信息
    • required：非空判断
    • pattern：正则表达式
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>名称：<input type="text" name="username" required></p>
<!--常用的正则：https://www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱：
    <input type="text" 
           name="diy" 
           pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

在这里插入图片描述

在这里插入图片描述

正则表达式

  • 搜索网址
https://www.jb51.net/tools/regexsc.htm

<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>名称：<input type="text" name="username" required></p>
<!--常用的正则：https://www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱：
    <input type="text" 
           name="diy" 
           pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

完整登陆表单演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h3>用户注册</h3>
<form action="1.我的第一个网页.html" method="get">
  <p>用户：
    <input type="text" name="username" value="" placeholder="请输入用户名">
  </p>
    <p>密码：
        <input type="password" name="passwd" value="" required>
    </p>
    <p>性别：
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">编程
        <input type="checkbox" value="read" name="hobby">阅读
    </p>
    <p>
        <input type="image" src="../resources/images/1.jpg " width="300" >
        <br>
    <hr>
        <input type="button" value="点击变更长" name="but" >
    
    </p>
    <p>反馈：
        <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea>
    </p>
    <p>附件上传：
        <input type="file" name="sources">
        <input type="button" name="btn2" value="点击上传">
    </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" size="10">
    </p>

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

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search" id="wb">
    </p>
    <!--增强鼠标可用性，点击label，光标自动到text上-->
    <p>
        <label for="wb">你点我试试</label>
        <input type="text" id="">
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    </p>


</form>

</body>
</html>

相关文章