13 - 表单

最新推荐文章于 2023-04-15 21:02:22 发布

xyyojl

最新推荐文章于 2023-04-15 21:02:22 发布

阅读量171

点赞数

分类专栏： html+css 前端文章标签：表单表单的属性表单的控件表单的伪类

本文链接：https://blog.csdn.net/xyyojl/article/details/82695698

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html+css

21 篇文章 0 订阅

订阅专栏

表单

form表单
form表单的属性
表单控件
表单的伪类

表单

表单元素时允许用户在表单中输入信息的元素(比如:文本域,下拉列表,单选框,复选框等等),可以提交信息

form是一个载体,规划一系列提交信息的控件集合体

form表单的属性

action 处理当提交表单时向何处(url)发送表单数据,谁响应我们的提交
method 规定用于发送form-data的HTTP方法
- get: 表单数据会在url中以?分隔发送到服务器,在浏览器地址栏可见(get 把信息写在信封外面)
- post: 表单数据会包含在表单体内发送到服务器(post 把信息写在信里面的)
- 安全性: 都不是加密的安全数据,后续js会讨论到
target=”” 规定action中提交的页面会在何处打开
- _self默认
- _blank 新窗口
- _parent父框架
name form表单的名字,提交的当前项的名称,在一个文档中多个form表单,name必须不一样,name必须唯一

表单控件

input

<input>标签规定了用户可以在其中输入数据的输入字段

<input type=" " name="" value="" placeholder="">

value 表单元素里面显示的文字
placeholder 默认值提示值,当鼠标聚焦的表单元素时,文字会消失。
require 必须输入

input的类型关于type的属性:

text 文本框
password 密码框(输入的信息会使用*来表示)
radio 单选按钮(只能选其中一个,简单来说,就是现在的一夫一妻制,不能像古代那样),name相同才能关联checked,一定要写name
checkbox 复选框
submit 表单提交按钮
reset 重置按钮,将表单的状态重置
file 上传文件,需要使用到这个

select/option下拉选框

size 规定下拉列表中可见选项的数目
selected 规定在select里面默认展示项

textarea 文本域

resize 调整尺寸属性
- horizontal 水平方向可以改变尺寸
- vertical 竖直方向可以改变尺寸
- none
rows 多少行
cols

`<fieldset>`和`<legend>`

fieldset 可将表单内的相关元素分组
<legend>标签为fieldset元素定义标题,和它组合使用,形成带有文字的边框分隔

datalist

内部有option的组合标签,数据列表标签,描述相关数据,添加id属性用于给input使用,input用list引用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单标签概览</title>
</head>
<body>
    <form action="" method="get">
        <input type="text" name="" value="你好,我是小白,多多交流">
        <div class="username">
            <label for="username">姓名:</label>
            <input type="text" name="username" id="username" value="一拳超人">
        </div>
        <div class="password">
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </div>
        <div class="hobby">
            <label>爱好</label>
            <input type="checkbox" name="hobby" value="read">读书
            <input type="checkbox" name="hobby" value="music">听歌
            <input type="checkbox" name="hobby" value="study">学习
        </div>
        <div class="sex">
            <label>性别</label>
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
        </div>
        <div class="file">
            <input type="file" name="myfile">
        </div>
        <div class="select">
            <select name="city">
                <option value="北京" selected>北京</option>
                <option value="上海">上海</option>
                <option value="杭州">杭州</option>
            </select>
        </div>
        <div class="textarea">
            <textarea name="article"cols="30" rows="10">多行文本和input的type=text有区别</textarea>
            <input type="hidden" value="123456">
            <input type="button" value="button">不会提交
            <input type="submit" value="submit">会提交
            <input type="reset"  value="reset">重置输入
        </div>
        <fieldset>
            <legend>前端进阶之路</legend>
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="javascript">javascript</option>
            <option value="Vue.js">Vue.js</option>
        </fieldset>
        <div class="datalist">
            <input list="study">
            <datalist id="study">
                <option value="html"></option>
                <option value="css"></option>
                <option value="javasctipt"></option>
            </datalist>
        </div>
    </form>
</body>
</html>

表单的伪类

:focus 获得表单的焦点的时候触发,设置提示
:focus-within 当表单里面的控件获得焦点的时候,表单会设置样式
- 当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。

:focus的简单例子如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>:focus的简单使用</title>
    <style>
        form span{
            display: none;
        }
        .txt:focus + span{
            display: block;
        }
    </style>
</head>
<body>
    <form action="" method="get">
        <input class="txt" type="text" name="" value="你好,我是小白,多多交流">
        <span>更多资料请查看我的博客,大家一起进步</span>
    </form>
</body>
</html>

:focus-within的例子如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>:focus-within的简单使用</title>
    <style>
        .test:focus-within{
            width: 300px;
            height: 150px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <form class="test" action="" method="get">
        <input class="txt" type="text" name="" value="你好,我是小白,多多交流">
    </form>
</body>
</html>