表单元素
-
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>
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
