HTML5基础笔记五（标签之表单）

最新推荐文章于 2024-03-04 16:34:48 发布

qq_55006020

最新推荐文章于 2024-03-04 16:34:48 发布

阅读量1.1k

点赞数

分类专栏： html5 文章标签： html5 笔记服务器 javascript python mysql 前端

本文链接：https://blog.csdn.net/qq_55006020/article/details/131411398

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML5基础笔记五（标签之表单）

一，表单的基本介绍

二，表上的三要素（表单标签，表单域，表单的按钮）

三，表单的type类型

1，文本框密码和按钮演示（text，password，submit）

8，单选表单（select+option）

9，多选表单（select+option+optgroup），多行文本框（textarea），让文本框获得焦点（label）

四，表单的type属性

4，电话

7，range滚动条

11，当页面被加载的时候，对话框自动获得焦点 autofocus

12，当页面被加载的时候，对话框默认的值

13，对话框不能为空必选 required-

五，总结

一，表单的基本介绍

表单也是一个大内容

form表单
表单在wep网页中是用来给用户填写信息的，从而能采集用户的联系，使网页具有交互的功能
所有用户输入内容的地方都用表单来写，如登录框，搜索框，选择框等
表单的属性 
有action 行动 也就是服务器地址
name 表单的名称
method 有get和post两种方法   用来提交数据给服务器

表单的三要素
1，表单标签  fomr表单标签
2，表单域  input
3，表单按钮

表单的元素
文本框 文本框通过input来设置
当用户要在表单里面填写字母数字字符串等内容的时候，就会用到文本域
<input type='text'>  文本域的类型 是text类型 可以填写数字
<input type='submit'>  文本域的类型 是submit 可以提交数据
<input type='text' name='文字提示内容'>  name是表示整个文本域可以用来干嘛的  通常我们会在前面填写
<input type='password' name='文字提示内容'>  name是表示整个文本域可以用来干嘛的  当texe等于密码的时候  内容会是***

type=text 代表文本框
type=password 代表密码框
type=submit 代表按钮框

二，表上的三要素（表单标签，表单域，表单的按钮）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>from表单</title>
</head>
<body>
<!--action 行动。 代表服务器地址-->
<!--method 方法 。代表输入框的选择属性 有get和post-- get提交的数据 服务器可以看的到，post提交的数据服务器看不到-->
<!--name 表单的名字-->
<!--表单三要素，1，表单的标签-->
<form action="" name="我的表单" method="get">
<!--    表单三要素，2表单域-->
    <input type="text">
<!--    表单的三要素，3表单的按钮-->
    <input type="submit">
<!--    或者用按钮标签来显示-->
    <button>按钮</button>
</form>
</body>
</html>

运行效果：

表单的type类型

type     不同的值代表不同的内容
          1，text 代表文本输入框
          2，password  代码密码输入框
          3，submit  代表提交按钮
          4，radio   单选框
          5，checkbox 多选框
          6，file   文件
          7，reset  重置
          8，button 单纯的一个实现 action功能的按钮
          9，image 图片按钮  需要设置图片地址
          10,select 选择列表 下拉列表  option 选项 optgroup是分类
          11，多行文本框 textrea
          12,label 改进鼠标用户的体验，当我们点击用户名的时候 就可以获得文版框的焦点

文本框密码和按钮演示（text，password，submit）

text 表示输入文本

password 表示输入密码会自动用圆点覆盖掉原来内容

submit 表示提交按钮，后面value修改按钮的名字

代码如下：

  <b>请输入账号： </b><input type="text" name="firstname">
    <br>
  <b>请输入密码： </b><input type="password" name="请输入密码">
    <br>
<!--    1修改成submit 默认是提交按钮  我们可以通过修改值 设定为自定义的内容 比如我们设置的登录按钮-->
  <input type="submit" value="登录"><br>

运行效果：

单选按钮演示（radio）

代码：

<!--    单选按钮 radio  如果name相同的话 代表这个是一组-->
    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="0">女
    <br>

运行效果：

多选按钮演示（checkbox）

代码如下：

<!--    多选按钮 checkbox   value的值是用来给后端交互的 value的值可以自定义-->
    <input type="checkbox" name="日常" value="1">学习
    <input type="checkbox" name="日常" value="0">吃饭
    <input type="checkbox" name="日常" value="1">打dota
    <input type="checkbox" name="日常" value="0">睡觉
    <br>

运行效果：

文件的上传（file）

<!--    文件file  上传-->
    <input type="file" name="img">

重置按钮（reset）

<!--    重置按钮 重置用户所选的操作 value可以给他换一个名字-->
    <input type="reset" value="清空内容">

没有任何功能按钮（botton）

这个按钮并非完全没有功能，指向的地址是form表单active的地址

<!--    没有任何功能的button按钮-->
  <br>
  <button>我的按钮</button>
  <button>点我</button>

运行效果：

图片做成按钮（image）

<!--  图片做成按钮 image  可以设置图片大小-->
  <br>
  <input type="image" src="images图片音频视频素材/关机.png" width="100px">
  <br>

单选表单（select+option）

<form action="https://www.baidu.com/">
  <select>
<!--    第一个是默认显示的
select  和option-->
    <option value="学习">请选择学习内容</option>
    <option value="学习">前端</option>
    <option value="学习">复习</option>
    <option value="学习">css3</option>
    <option value="学习">html5</option>
  </select>
  <button>确定</button>
</form>

第一个是默认显示的运行效果：

多选表单（select+option+optgroup），多行文本框（textarea），让文本框获得焦点（label）

代码：

<form action="https://www.baidu.com/">
<!--  多选表单 select+option  optgroup 是分组  -->
  <select>
<!--    第一个是默认显示的-->
    <option value="3">请选择项目</option>
<!--    分组 第一个主  label是分组的项目框-->
    <optgroup label="学习">
      <option value="1">python</option>
      <option value="1">wep</option>
      <option value="1">java</option>
      <option value="1">css3</option>
    </optgroup>
    <optgroup label="娱乐">
      <option value="2">dota</option>
      <option value="2">剑三</option>
      <option value="2">stm</option>
      <option value="2">睡觉</option>
    </optgroup>
  </select>
    <br>
<!--    多行文本框 cols是宽度  rows是高度 -->
    <textarea  id="" cols="30" rows="5">
        我是多行
        我是第二行
    </textarea>
    <br>
<!--    label 让文本框获得焦点-->
    <label for="user">用户名:</label>
    <input type="text" name="user" id="user">
    <br>
    <br>
    <p>下面是type的属性</p>
</form>

表单的type属性

<!--type属性
        1，email 设置邮箱 自动检验对话框是否是邮箱
        2，url 设置网址  自动检验对话框输入的内容是否是网址
        3,搜索功能 可以取消
        4，电话 没啥鸟用
        5，取色器 很好很强大
        
       6，数字 定义数字的阶段
       7，range 滚动条
       8,日期 date
       9，日期扩展 month 调用年 月控件  不显示日
       10，日期扩展 week 调用年 周控件  只显示年和周

邮箱验证 email

代码：

<!--   1 设置文本域是邮箱格式 类型如果是邮箱 则会验证邮箱-->
    e-mail: <input type="email" name="email">
    <input type="submit">
    <br>

网址验证（url）

<!--  2  url 是验证地址-->
    <label for="url">请输入网络地址</label>
    请输入网址: <input type="url" id="url">
    <input type="submit">
    <br>

搜索功能，可以取消（serl）：

<!--3 搜索功能，可以取消   -->
    <label for="serl">请输入搜索内容</label>
    <input type="search" id="serl">
    <input type="submit">
    <br>

电话

没啥鸟用，需要我们自己后台写正则表达式去做验证这里就不贴了

颜色取值（功能超级实用，超级强大）

<!--5 颜色取值 取色器 取色器超级强大 -->
    <label for="颜色">取颜色</label>
    <input type="color" id="颜色">
    <input type="submit">
    <br>

数值最大值和最小值

<!--6，定义数字 number  手动设置一个最大值和最小值-->
    <laber for="数字">请输入数字1-100</laber>
    <input type="number" id="数字" name="numb" min="1" max="100">
    <input type="submit">
    <br>

range滚动条

<!--7，滚动条 手动设置一个最大值和最小值-->
    <laber for="range">滚动条1-100</laber>
    <input type="range" id="range" name="gundong" min="1" max="100" value="50">
    <input type="submit">
    <br>

日期（让用户选择日期）

<!--8，日期 调用日期控件，让用户选择日期-->
    <laber for="日期">日期</laber>
    <input type="date" id="日期" name="日期">
    <input type="submit">
    <br>

日期扩展（年月）

<!--9，日期扩展，调用month 和year控件-->
    <laber for="年月">请选择连月</laber>
    <input type="month" id="年月" name="年月">
    <input type="submit">
    <br>

日期扩展（年，周）

<!--10，日期扩展 选择周 week 调用年 周控件-->
    <input type="week" name="周">
    <input type="submit">
    <br>

当页面被加载的时候，对话框自动获得焦点 autofocus

<!--    autofocus 页面被加载的时候，自动获得焦点-->
    <input type="text" name="user1" autofocus>
    <input type="submit">
    <br>

当页面被加载的时候，对话框默认的值

<!--   placehoder 默认信息 -->
    <input type="text" name="moren" placeholder="我是默认信息">
    <input type="submit" value="登录">
    <br>

对话框不能为空必选 required-

<!--    对话框不能为空 必选 required-->
    <input type="text" name="not null" required>
    <input type="submit">

效果如下：

总结

<!--      当在action添加了值之后 就会有一个跳转地址-->
<form action="https://www.baidu.com/" >
<!-- name是给后端交互用的  相同的name代表一组
type     不同的值代表不同的内容
          1，text 代表文本输入框
          2，password  代码密码输入框
          3，submit  代表提交按钮
          4，radio   单选框
          5，checkbox 多选框
          6，file   文件
          7，reset  重置
          8，button 单纯的一个实现 action功能的按钮
          9，image 图片按钮  需要设置图片地址
          10,select 选择列表 下拉列表  option 选项 optgroup是分类
          11，多行文本框 textrea
          12,label 改进鼠标用户的体验，当我们点击用户名的时候 就可以获得文版框的焦点


          ########################################

          type属性
                1，email 设置邮箱 自动检验对话框是否是邮箱
                2，url 设置网址  自动检验对话框输入的内容是否是网址
                3,搜索功能 可以取消
                4，电话 没啥鸟用
                5，取色器 很好很强大

               6，数字 定义数字的阶段
               7，range 滚动条
               8,日期 date
               9，日期扩展 month 调用年 月控件  不显示日
               10，日期扩展 week 调用年 周控件  只显示年和周

          ############
          新增的属性 使用率超级高  增加输入框的能力
                1，当页面被加载的时候，对话框自动获得焦点 autofocus
                2，当页面被加载的时候，对话框默认的值
                3，对话框不能为空 的自动验证

-->

type属性
        1，email 设置邮箱 自动检验对话框是否是邮箱
        2，url 设置网址  自动检验对话框输入的内容是否是网址
        3,搜索功能 可以取消
        4，电话 没啥鸟用
        5，取色器 很好很强大
        
       6，数字 定义数字的阶段
       7，range 滚动条
       8,日期 date
       9，日期扩展 month 调用年 月控件  不显示日
       10，日期扩展 week 调用年 周控件  只显示年和周

新增的属性 使用率超级高  增加输入框的能力
1，当页面被加载的时候，对话框自动获得焦点 autofocus
2，当页面被加载的时候，对话框默认的值
3，对话框不能为空 的自动验证

qq_55006020

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
HTML5基础笔记五（标签之表单）

表单也是一个大内容form表单表单在wep网页中是用来给用户填写信息的，从而能采集用户的联系，使网页具有交互的功能所有用户输入内容的地方都用表单来写，如登录框，搜索框，选择框等表单的属性有action 行动也就是服务器地址name 表单的名称method 有get和post两种方法用来提交数据给服务器表单的三要素1，表单标签 fomr表单标签2，表单域 input3，表单按钮表单的元素文本框文本框通过input来设置。
复制链接

扫一扫