文章目录
1.HTML基础 总览
javaWeb学习笔记思维导图
参考狂神说javaweb教程笔记
参考尚硅谷javaWeb教程笔记
问题扩展与汇总:
1. 表单基本操作:
1.1 表单基本语法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
提交请求:
action: 提交地址
method:提交的方式
get:携带参数,参数可以在url中看到,不安全,大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post:参数不可见、安全,大小没有限制 (表单提交常用方式post)
携带的参数
key: 控件的name。这个属性不要忘记
-->
<form action="test.html" method="get">
<!--输入框
input 标签
name: 必须写上,表单内容的别称
type:
text : 文本框
password: 密码框
submit: 提交按钮 value表示标签的内容
reset: 重置 value表示标签的内容
-->
<p>名字:<input type="text" name="username"> </p>
<p>密码:<input type="password" name="password"> </p>
<p>
<input type="submit" name="button" value="提交">
<input type="reset" name="reset" value="重置">
</p>
</form>
</body>
</html>
1.2 几个常用表单元素
1、文本框
<!--type="text"
name:文本框名称(必填)
value:文本框初始值
size:文本框长度
maxlength:文本框可输入最多字符
-->
<p>
用户名:<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
2、密码框
<!--type="password"
name:密码框名称(必填)
size:密码框长度
-->
<p>
密码:<input type="password" name="pwd" size="20">
</p>
3、单选按钮
- 同一组单选按钮,name属性值必须相同,才能在选中单选按钮时达到互斥
<!--单选框type="radio"
value: 表单提交的值
name: 名字相同,则自动分组,必须要分组
checked: 默认选中
disabled: 禁用
注意事项:默认没有值,需要在input type="radio" 后增加单选框的属性
-->
<p>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex" disabled>女
</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>听音乐
<input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>
5、下拉列表框
-
一个中至少包含一下
-
希望在页面加载时有默认选中的选中项,则必须使用selected属性,
- 如果没有默认选中项则第一个选项默认被选中
<!--下拉列表框
select
name: 组件名字 必填
size: 窗口显示的条目数,默认为1个
option: 选项
value 必填
option标签中间写下拉框的值
selected: 默认选中
-->
<p>
科目:<select name="科目">
<option value="1">化学</option>
<option value="2">数学</option>
<option value="3" selected>英语</option>
<option value="4">政治</option>
<option value="5">物理</option>
</select>
</p>
6、按钮
<!--按钮
value:按钮上的文字
-->
<p>
<!--提交-->
<input type="submit" value="登录">
<!--重置--使用-->
<input type="reset" value="清空">
<!--普通按钮:一般会和javascript结合使用,点击按钮xxx-->
<input type="button" value="点我">
<!--图片按钮
type="image"
-->
<input type="image" src="../statics/images/bd.png">
</p>
7、多行文本域
- 改变cols和rows的值,文本框内容显示空间。
- 多行文本域的内容是在标签之间。
<!--文本域
cols 显示的列数
rows 显示的行数
-->
<textarea name="textarea" cols="50" rows="5">要填写的文件内容
</textarea>
8、文件域
- 在表单中使用文件域时,必须设置表单的“enctype”编码属性为“multipart/form-data”,
- 表示将表单数据分为多部分提交。
- 一般与提交按钮一块设定
<!--文件域 type="file"
enctype:表单编码属性-->
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>
9、邮箱
-
会自动验证Email地址格式是否正确
-
也可以用正则表达式进行验证格式是否正确
<!--邮箱-->
<p>
邮箱:<input type="email" name="email">
</p>
10、网址
- 会自动验证URL地址格式是否正确
<!--url网址-->
<p>
url:<input type="url" name="url">
</p>
11、数字
<!--数字:商品数量,计数 type="number"
最小值 min="0"
最大值 max="100"
步长 step="10"
-->
<p>
数字:<input type="number" min="0" max="100" step="10">
</p>
12、滑块
<!--滑块
默认值0~100
-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
13、搜索框
<!--搜索框-->
<p>
搜索: <input type="search" name="search">
</p>
1.3 表单的几个高级应用:隐藏域、只读、禁用、标注
1、隐藏域
- 在浏览器中看不到隐藏域,但是在提交表单时可以看到隐藏域的内容被提交至服务器
<!--隐藏域-->
<p>
<input type="hidden" name="count" value="10">
</p>
2、只读、禁用
<!--只读:readonly
禁用:disabled
-->
<p>
<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >
</p>
3、表单元素的标注
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
<!--通过设定for=id标志标签,哪个框用到id标志,就会控制哪个标签
-->
<label for="mark">你点我试试</label>
<p>
文本框1:<input type="text" name="test" />
</p>
<p>
文本框2:<input type="text" name="test2" id="mark"/>
</p>
1.4 表单的初级提示与验证:
1、placeholder
- 提示语默认显示,当文本框中输入内容时提示语消失
<p>
<!--placeholder="必须是url格式" 默认提示,告诉用户应该这么做-->
用户名:
<input type="url" name="username" placeholder="必须是url格式">
</p>
2、required
- 规定文本框填写内容不能为空,否则不允许用户提交表单
<p>
<!--required必须要填写这个字段-->
密码: <input type="password" name="pwd" required>
</p>
3、pattern
用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单
<p>
<!--pattern:正则表达式-->
手机号码: <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>