大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。
本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。
视频教程+课件+源码 打包下载 ：
链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234
HTML5（在第二阶段目录里）
HTML5 表单基础以及增强
一、核心元素
1. form
表单容器，负责把内部控件的 name/value 提交给服务器。
常用属性：
action：提交地址，默认当前页面。method：提交方式，常用GET/POST。默认GET。enctype：编码方式，文件上传必须用multipart/form-data。target：在哪个窗口打开响应，如_blank。autocomplete：是否开启自动完成，on/off。novalidate：HTML5 属性，关闭浏览器自带验证。
html
<form action="/submit" method="post">
...
</form>只有带
name的表单控件才会被提交。
2. label
表单控件的说明文字，提升可访问性。点击 label 可以聚焦对应控件。
两种写法：
html
<!-- 显式关联：for 对应 input 的 id -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<!-- 隐式关联：label 包裹 input -->
<label>
邮箱：
<input type="email" name="email">
</label>3. input
最常用的表单控件，由 type 决定形态。
html
<input type="text" name="username" value="">常用属性：
type：控件类型。name：提交时的字段名。value：值。id：配合label。placeholder：占位提示。required：必填。disabled：禁用，不提交。readonly：只读，会提交。
二、基础控件
1. 文本框
html
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">2. 密码框
html
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password">3. 单选按钮 radio
同一组单选按钮必须有相同 name，才能互斥。
html
性别：
<label><input type="radio" name="gender" value="male" checked> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>4. 复选框 checkbox
同一组复选框可以有相同 name，表示可多选。
html
爱好：
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>5. 提交按钮
html
<input type="submit" value="提交">
<!-- 或 -->
<button type="submit">提交</button>6. 重置按钮
把表单控件恢复到 HTML 默认值，不是清空。
html
<input type="reset" value="重置">
<!-- 或 -->
<button type="reset">重置</button>7. select 和 option
下拉列表。name 写在 select 上，value 写在 option 上。
html
<label for="city">城市：</label>
<select id="city" name="city">
<option value="">请选择</option>
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>多选：
html
<select name="cities" multiple size="3">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>分组：
html
<select name="fruit">
<optgroup label="热带水果">
<option value="banana">香蕉</option>
<option value="mango">芒果</option>
</optgroup>
</select>8. textarea
多行文本域。默认值写在标签内部，不是 value。
html
<label for="intro">简介：</label>
<textarea id="intro" name="intro" rows="4" cols="30" placeholder="请输入简介"></textarea>9. button
按钮元素，比 input 按钮更灵活，可以包含 HTML。
html
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('普通按钮')">普通按钮</button>注意：button 在表单内默认 type="submit"，建议始终显式写 type。
三、HTML5 表单增强
1. 新增 input 类型
这些类型在支持的浏览器中会提供更好的键盘、日期选择器或验证：
html
<input type="email" name="email">
<input type="url" name="site">
<input type="tel" name="phone">
<input type="number" name="age" min="1" max="100" step="1">
<input type="range" name="level" min="0" max="10" value="5">
<input type="date" name="birthday">
<input type="time" name="time">
<input type="datetime-local" name="meeting">
<input type="month" name="month">
<input type="week" name="week">
<input type="color" name="color" value="#ff0000">
<input type="search" name="keyword">
<input type="file" name="avatar" accept="image/*">2. 新增常用属性
html
<input
type="text"
name="username"
placeholder="请输入用户名"
required
autofocus
autocomplete="username"
minlength="3"
maxlength="20"
pattern="[A-Za-z0-9_]{3,20}"
>常见增强属性：
placeholder：占位提示。required：必填。autofocus：自动聚焦。autocomplete：自动完成。pattern：正则验证。min/max/step：数值、日期范围。minlength/maxlength：长度限制。multiple：允许多个值，如邮箱、文件。accept：文件类型限制。list：配合datalist提供建议列表。form：让控件关联到指定表单。formaction/formmethod：提交按钮覆盖表单提交地址/方式。novalidate：关闭验证。
3. datalist 建议列表
html
<label for="browser">浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>4. 表单验证
HTML5 自带验证，例如：
html
<form action="/submit" method="post">
<input type="email" name="email" required>
<button type="submit">提交</button>
</form>5. 分组：fieldset 和 legend
html
<fieldset>
<legend>账号信息</legend>
<label for="user">用户名：</label>
<input type="text" id="user" name="user">
</fieldset>四、综合示例
html
<form action="/register" method="post" autocomplete="on">
<fieldset>
<legend>注册信息</legend>
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"
placeholder="3-20位字母数字" required minlength="3" maxlength="20">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required minlength="6">
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
</p>
<p>
性别：
<label><input type="radio" name="gender" value="male" checked> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
</p>
<p>
爱好：
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>
</p>
<p>
<label for="city">城市：</label>
<select id="city" name="city">
<option value="">请选择</option>
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>
</p>
<p>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
</p>
<p>
<label for="intro">简介：</label>
<textarea id="intro" name="intro" rows="4" cols="30"
placeholder="介绍一下自己" maxlength="200"></textarea>
</p>
<p>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</p>
</fieldset>
</form>