1.基础表单
表单在网页中应用很广泛,申请账号填写注册信息,或者进行登录填写登录信息等等
是一个将用户信息组织起来的容器
注册:
登录:
搜索框:
提交请求:
携带的参数
key: 控件的name。这个属性不要忘记
get:携带参数,参数可以在url中看到,不安全,大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post:参数不可见、安全,大小没有限制 (表单提交常用方式post)
action: 提交地址,服务器上处理表单输出的程序,是地址属性,
当点击提交后信息会发送到web服务器上由 action 属性指定的程序处理。
method:提交的方式,这个属性是告诉浏览器如何将数据发送到服务器上,有post 和 get 两种
输入框:
input 标签
name: 必须写上
type:
text : 文本框
password: 密码框
submit: 提交按钮
reset: 重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
提交请求:
携带的参数
key: 控件的name。这个属性不要忘记
get:携带参数,参数可以在url中看到,不安全,大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post:参数不可见、安全,大小没有限制 (表单提交常用方式post)
-->
<!--form 表单
action: 提交地址
method:提交的方式
-->
<form action="test.html" method="post">
<!--输入框
input 标签
name: 必须写上
type:
text : 文本框
password: 密码框
submit: 提交按钮
reset: 重置
-->
<p>名字:<input type="text" name="username"> </p>
<p>密码:<input type="password" name="password"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
2.表单元素
所有表单元素都要写在form表单中,必须加上name属性,否则提交的时候取不到值!
1. 文本框
<!--文本框 type="text"
value :文本框默认的初始值
size: 文本框的长度
maxlength: 文本框的最大输入长度
-->
<p>
<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
2. 密码框
<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
<input type="password" name="pwd" size="20">
</p>
3. 单选按钮
<!--单选框type="radio"
value: 表单提交的值
name: 名字相同,则自动分组,必须要分组
checked: 默认选中
disabled: 禁用
注意事项:默认没有值,需要再input type="radio" 后增加单选框的属性
-->
<p>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</p>
4. 复选框
<!--多选框 type="checkbox"
name: 必填项,如果是分组,则名称一致
value: 表单提交的值
checked: 默认选中
disabled: 禁用
注意事项:默认没有值,需要再input type="checkbox" 后增加多选框的属性
-->
<p>
<input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="music" checked>听音乐
</p>
5. 下拉列表框 select-option
<!--下拉列表框
select
name: 组件名字 必填
size: 显示的数量,默认为1
option: 选项
value 必填
option标签中间写下拉框的值
selected: 默认选中
-->
<select name="科目">
<option value="1"></option>
<option value="2">数学</option>
<option value="3" selected>英语</option>
<option value="4">英语</option>
<option value="5">英语</option>
</select>
6. 按钮
<!--按钮
value:按钮上的文字
-->
<p>
<!--提交-->
<input type="submit" value="登录">
<!--重置--使用-->
<input type="reset" value="清空">
<!--普通按钮:一般后来我们会和javascript结合使用,点击按钮xxx-->
<input type="button" value="点我">
<!--图片按钮
type="image"
src:图片的路径
-->
<input type="image" src="../statics/images/bd.png">
</p>
7. 文本域
<!--文本域 cols rows-->
<textarea name="textarea" cols="10" rows="10">
</textarea>
8. 文件域
<!--
表单,需要支持提交复杂文件 enctype="multipart/form-data"
未来:文件上传会用到
-->
<form action="test.html" method="get" enctype="multipart/form-data">
<input type="file" name="video">
</form>
9. 邮箱(验证)
扫描二维码关注公众号,回复:
8910013 查看本文章
<!--邮箱-->
<p>
邮箱:<input type="email" name="email">
</p>
- 网址(基本验证)
<!--url网址-->
<p>
url:<input type="url" name="url">
</p>
- 数字(上下)
<!--数字:商品数量,计数 type="number"
最小值 min="0"
最大值 max="100"
步长 step="10"
-->
<p>
数字:<input type="number" min="0" max="100" step="10">
</p>
- 滑块(可调节)
<!--滑块
默认值0~100
-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
- 搜索框(带关闭按钮)
<!--搜索框-->
<p>
搜索: <input type="search" name="search">
</p>
3.表单的应用
1.隐藏域
<!--隐藏域-->
<p>
<input type="hidden" name="count" value="10">
</p>
2.只读和禁用
<p>
用户名: <input type="text" name="username" readonly>
</p>
<p>
密码: <input type="password" name="pwd" disabled>
</p>
3.标注
<p>
<!--通过 for="name" 来链接到 表单中的指定ID -->
<label for="name">用户名: </label>
<input type="text" name="username" id="name">
</p>
4.初级表单验证
为什么要进行表单验证:
检查用户输入的信息是否安全,提高网站的安全,减少服务器的压力。
- 默认提示
<!--placeholder="必须是url格式" 默认提示,告诉用户应该这么做-->
用户名:
<input type="url" name="username" placeholder="必须是url格式">
- 必填项
<p>
<!--required必须要填写这个字段-->
密码: <input type="password" name="pwd" required>
</p>
- 正则表达式
<p>
<!--pattern:正则表达式-->
手机号码: <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>