【JQuery + HTML+CSS】之表单元素

最新推荐文章于 2022-05-28 13:03:17 发布

夹心776655

最新推荐文章于 2022-05-28 13:03:17 发布

阅读量146

点赞数

分类专栏：代码实例 HTML&CSS重要概念常用技巧文章标签： html

本文链接：https://blog.csdn.net/qq_37086980/article/details/111474581

版权

代码实例同时被 3 个专栏收录

72 篇文章 3 订阅

订阅专栏

HTML&CSS重要概念

8 篇文章 0 订阅

订阅专栏

常用技巧

3 篇文章 0 订阅

订阅专栏

表单元素

form
- 双标签，默认占一整行
- 声明一个表单区域
- 作用：用于收集不同类型的用户输入信息
input
- 单标签，可以并排显示,，默认边框，和边距
- type：
  - text:文本输入框
  - password 密码框，默认掩码显示
  - radio 单选框
  - checkbox 复选框
  - button 普通按钮
  - submit 提交按钮，默认有提交两个字，默认有提交功能，需要配合name属性
  - reset 重置按钮，默认有重置两个字，清空输入框的内容
  - file 文件上传按钮
  - image 图片按钮默认有提交动作
button
- 双标签，可以并排显示，默认有边框，边距
- 默认type是submit，有提交功能
- type：button
select
- 双标签
- 下拉列表，要配合option标签使用，默认选中第一项
textarea
- 双标签
- 多行文本输入域，可以扩展宽高，内容超出自己高度时，会出现滚动条

表单属性

写在开始标签内部的

表单元素属性

value
- 给输入框设置值
name
- 对提交到服务器的表单数据进行区分，标识
checked
- 选中状态
- 一般用于单选或者复选按钮的提前选中状态
selected
- 预选中状态
- 一般用于下拉列表的提前选中
size
- 下拉列表默认显示的个数
- 用于select标签，设置显示几个选项，默认只显示一个
maxlength
- 最大输入长度
disabled
- 禁用状态
- 会有灰色背景，数据不能操作，不能提交给后台
readonly
- 只读属性
- 数据不能操作，可以提交到后台

form的属性

action
- 定义表单数据提交的目标地址
- 如果不写，表示提交到当前的网页
method
- 数据提交方式
- 取值
  - get（默认值），地址栏里可以看见输入的信息，数据大小有限制，安全性比较低，常用于从后台获取数据
  - post，安全性比get请求高一些，对传输的数据大小基本没有限制，常用于向后台提交数据
target
- 定义目标地址的打开方式
- 取值
  - _self （默认值）当前窗口打开
  - _blank 新打开窗口

代码实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <style>
        /* input{
            height: 60px;
            width: 200px;
        } */
    </style>
</head>
<body>
    <!-- form:表单区域声明，可以发送不同类型的用户输入信息
        特点: 块标签
        input: 输入框, 内联块
    -->
    <form action="">
        文本输入框:<input type="text" name ="phone" placeholder="请输入手机号" disabled>
        <br>
        密码输入框:<input type="password" name = "password">
        <br>
        <!-- label: 扩大选择区域 -->
        单选框:<input type="radio" name = "gender" id = "male" value="1"><label for="male">Male</label>
               <input type="radio" name = "gender" id = "female" value="2"><label for="female">Female</label>
               <input type="radio" name = "gender" value="3">Privacy
        <br>
        复选框:
        <input type="checkbox" id = "sleep"><label for="sleep">Sleep</label>
        <input type="checkbox">Game
        <input type="checkbox">Coding
        <hr>
        <!-- 没有默认值，只有灰色小方块 -->
        普通按钮:<input type="button" value="Click">
        <br>
        <!-- 默认自带提交的文字
        IE:提交查询内容 
        会有提交动作, 可以提交表单拥有name属性的数据到后台
        Get提交 ?phone=15727647083&password=123456&gender=1-->
        提交按钮:<input type="submit" value = "Register">
        <br>
        <!-- 自动重置, 清空表单内的输入信息 -->
        重置按钮:<input type="reset">
        <!-- 图像按钮 默认有提交动作，可以提交数据到后台-->
        <br>
        <input type="image" src="./images/icon24.png" alt="">
        <br>
        <!-- 文件上传 -->
        <input type="file">


        <hr>
        <!-- 下拉列表 -->
        Age: <select name="" id="">
               <option value="">1990</option>
               <option value="">2000</option>
               <option value="">2010</option>
        </select>
        <br>
        <!-- 多行文本, 文本域，用户可以通过拖拽改变自身宽高 -->
        <textarea name="" id="" cols="30" rows="10">

        </textarea>
        <br>
        <!-- 双标签 默认类型为submit, 可以提交数据到后台-->
        <button>提交按钮</button>
        <button type="submit">提交按钮</button>
       <button type="button">普通按钮</button>
        <button type="reset">重置按钮</button>
    </form>
</body>
</html>

JQuery如何获取表单元素

1. 表单属性过滤选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性过滤选择器</title>
</head>

<body>
    输入框: 
    <input type="text">
    <input type="text">
    <input type="text" disabled>
    <input type="text" disabled><br>
    单选: 
    <input type="radio" checked>
    <input type="radio"><br>
    多选按钮: 
    <input type="checkbox" checked>
    <input type="checkbox"><br>
    下拉列表
    <select name="" id="">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="nj">南京</option>
    </select>

    <script src="./js/jquery.js"></script>
    <script>
        console.log($('input:enabled')); // 获取可用的输入框
        console.log($('input:disabled')); // 获取不可用的输入框

        console.log($(':checkbox:checked')); // 获取选中的复选框
        console.log($(':radio:checked')); // 获取选中的单选框

        console.log($('select :selected')); // 获取选中的下拉列表的项


    </script>
</body>

</html>

2.表单元素过滤选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素过滤选择器</title>
</head>

<body>
    输入框: 
    <input type="text">
    <input type="text">
    <input type="text" disabled>
    <input type="text" disabled><br>
    单选: 
    <input type="radio" checked>
    <input type="radio"><br>
    多选按钮: 
    <input type="checkbox" checked>
    <input type="checkbox"><br>
    下拉列表: 
    <select name="" id="">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="nj">南京</option>
    </select><br>
    其他:
    <input type="button" value="普通按钮">
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
    <input type="image" src="" alt="">
    <input type="file" name="" id="">
    <input type="date" name="" id="">
    <input type="number" name="" id="">

    <textarea name="" id="" cols="30" rows="10">12345</textarea>

    <script src="./js/jquery.js"></script>
    <script>
        console.log($(':input')); // 获取所有的表单
        console.log($(':text')); // 获取所有的输入框
        console.log($(':radio')); // 单选按钮
        console.log($(':checkbox')); // 复选按钮
        console.log($(':button')); // 按钮
        console.log($(':reset')); // 重置按钮
        console.log($(':submit')); // 重置按钮
        console.log($(':image')); // 上传图片
        console.log($(':file')); // 上传文件 

    </script>
</body>

</html>