表单介绍

最新推荐文章于 2023-12-12 09:25:36 发布

weixin_46370867

最新推荐文章于 2023-12-12 09:25:36 发布

阅读量286

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_46370867/article/details/108176330

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、表单

表单是允许接收用户输入的信息, 其他元素仅是用来向用户展示信息。

在 HTML 元素中, 可以与服务端进行通信的只有表单。

目前, 在真实的 Web 应用或网站中,网站的用户注册和登录功能、搜索功能中的搜索框、写博客的发布功能都是由表单完成的。

2、form元素

form元素：代表表单（块级元素）

作用：

用来就收用户输入的信息
与服务端进行通信（向服务端提交信息）

属性：

action属性: 设置提交表单的服务端地址
method属性: 设置提交表单时的请求类型（ GET 、 POST）
enctype属性: 设置表单提交时的MIME类型（主要可实现文件上传）

表单的组成部分（2个）：

1.元素：表单的容器内容

2.表单子组件元素：是真正用来接收用户输入的信息

<input>元素: 输入框
<textarea>元素: 文本域
<select>元素: 下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form元素</title>
</head>
<body>
    <form action="#"></form>
</body>
</html>

3、input元素

元素：空元素

属性：

type属性：设置输入框的类型
value属性：设置输入框的默认值
display属性：设置输入框是否可用（只设置属性名）
readonly属性：设置输入框是否为只读

HTML5新增属性：

autofocus属性：设置输入框自动获取焦点
placeholder属性：设置输入框的默认提示信息（用来替代value属性为用户展示提示信息）

输入框类型：

text：（单行）文本框

password：密码框（显示与隐藏动态切换功能）

radio：单选框

checkbox：复选框

[^单选框或复选框: 定义相同的name属性值, 表示为一组]:
[^checked属性: 表示当前单选框或复选框被选中]:

button：按钮

submit：提交按钮

reset：重置按钮

file：文件域

hidden：隐藏域

HTML5新增输入框类型：

email：电子邮件

url：URL地址

search：搜索框

tel：电话框

date：日期控件

week：星期控件

month：月控件

color：颜色控件

number：数字控件

按钮：

button: 普通按钮

submit: 提交按钮(提交表单)

reset: 重置按钮

元素: 按钮（与 button: 普通按钮效果相同）

与的区别:

一般情况下, 配合元素使用

与元素没有关系

文件域：

一般用来实现文件上传或选择头像等功能

数量设置：

单文件选择：默认情况

多文件选择：设置 multiple
类型设置：

默认：可以选择任何类型

accept属性：设置选择文件的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input元素</title>
</head>
<body>
    <form action="#">
        <input type="text" value="请输入你的用户名">
        <input type="text" placeholder="请输入你的用户名">
        <input type="password" placeholder="请输入密码">
        <br>
        <!-- 单选框或复选框：定义相同的name属性值，表示为一组
                checked属性: 表示当前单选框或复选框被选中
         -->
        
         <!-- radio 单选框 -->
         <input type="radio" name="like" checked>HTML 
         <input type="radio" name="like">CSS 
         <input type="radio" name="like">javascript

         <br>

         <!-- checkbox 复选框 -->
         <input type="checkbox" name="like" checked>html
         <input type="checkbox" name="like">css
         <input type="checkbox" name="like">javascript
         <br>

         <!-- button：按钮 -->
             <input type="button" value="按钮1">
             <button>按钮2</button>
         <!-- * submit: 提交按钮(提交表单)
                 * reset: 重置按钮 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <br>

        <!-- 文件域 -->
        <input type="file" multiple accept="video/*">
        <br>

        <!-- 一般用来存储一些不想用户知道的数据内容, 比如用户ID -->
        <input type="hidden">
        <br>
        <!-- 提供了Email地址格式的验证 -->
        <input type="email">
        <!-- 提供了URL地址格式的样式(验证不完整) -->
        <input type="url">
        <!-- 搜索框: 移动端显示(右下角按钮显示"搜索") -->
        <input type="search">
        <!-- 电话框: 移动端显示(软键盘显示数字) -->
        <input type="tel">
        <input type="date">
        <input type="week">
        <input type="month">
        <input type="color">
        <input type="number">


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

4、label元素

元素：一般配合元素

作用：为某个文本框提供文本提供内容

属性：

for属性：设置的值与元素的id属性值一致

5、输入框样式

outline属性：用来设置输入框的获取焦点时的外边框的样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入框的样式</title>
  <style>
    input {
      /* 用来设置输入框的获取焦点时的外边框的样式 */
      outline: none;
      /* 用来设置输入框的边框 */
      border: none;
      border-bottom: 15px solid yellowgreen;
    }
  </style>
</head>

<body>
  <form action="#">
    <label for="username">用户名: </label>
    <input type="text" id="username" placeholder="请输入你的用户名">
    <label for="password">密码: </label>
    <input type="password" id="password">
  </form>
</body>

</html>