版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xyyojl/article/details/82695698
表单
- 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>