前言
本次笔记主要记录学习HTML表单的知识，如有错误麻烦大佬指出，万分感谢！
附上学习视频链接：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
1、form标签（块级元素）
form标签用于为用户输入创建HTML表单。
表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含textarea等元素。表单用于向服务器传输数据。form元素是块级元素，其前后会产生折行。
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL | 规定当提交表单时向何处发送表单数据 |
| method | get、post | 规定用于发送form-data的 HTTP方法 |
| name | Form_name | 规定表单的名称 |
| target | _blank _self _ parent_top framename | 规定在何处打开action URL |
| id | 唯一标识 |
method:表单提交方式:get、post
get:（默认），主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存，速度快是post的2倍，用于查询数据
post:数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存，用于提交数据
2、表单元素
2.1.input（单标签）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<form action="#" method="get" id="myform" name="myform">
编号：<input type="hidden" name="userId" value="1" /><br>
姓名：<input type="text" name="zhangsan" value="userName" /><br>
密码：<input type="password" name="userPwd" maxlength="6" /><br>
性别：男 <input type="radio" name="userSex" name="man" checked="checked" />
女 <input type="radio" name="userSex" name="woman" /><br>
爱好：唱歌<input type="checkbox" name="userHobby" value="sing" />
跳舞<input type="checkbox" name="userHobby" value="sing" />
说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled" /><br>
生日：<input type="date" name="userDate" /><br>
头像：<input type="file" name="userHead" /><br>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
<input type="submit" value="提交按钮"/>
<input type="image" src="img/1.png"/>
</form>
</body>
</html>
input标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。
2.1.1.常用元素类型（type）
表单元素都需要设置name属性值，否则数据将无法传递！！
text：文本框
password：密码框
radio：单选框（需要设置一组相同的name属性值）
checkbox：复选框（需要设置一组相同的name属性值）
button：普通按钮
hidden：隐藏域(用来存放需要传递给服务器，但不需要显示的数据)
file：文件域（上传文件）
2.1.2.不常用元素类型
date：日期框
submit：提交按钮
rest：重置按钮
image：图片按钮（提交按钮）
2.1.3.元素的值（value）
checked:是否选中（单选框/复选框）默认选中可用checked="checked"或只写checked
disabled：是否禁用，用法同上
maxlength：允许输入的最大字符
2.2.textarea文本域（双标签）
简介：<textarea name="remark" rows="5" cols="30">Maker!（这里写值）</textarea>文本域可以拉伸，也可以设置 rows：文本域的高度 cols：文本域的宽度
2.3.label（双标签）
<label for="userName">姓名</label>：<input type="text" id="userName" name="zhangsan" value="userName" />label标签的for属性值需要和表达元素的id属性值相同才能实现点击label标签聚焦
2.4.button按钮（双标签）
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button><br>和上面按钮类似，但功能更丰富
注意：！默认为提交按钮！
2.5.select下拉框（双标签）
<select name="city">
<option>请选择城市</option>
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Hangzhou">杭州</option>
</select>默认选中：selected 多选：multiple="multiple" 一次可见内容：size
下拉框和下拉选项都可以被禁用
注意:当option设置了value属性值时，提交的数据是value对应的值;如果未设置value，则提交的数据是文本值
3.常用字符实体
< ：<;
>：>
空格：>：
©（版权符号）：©
3.1.标签的分类
HTML中标签元素三种不同类型:块状元素，行内元素，行内块状元素
3.1.1.块级元素
元素都从新的一行开始，并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可设置;元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度
3.1.2.行内元素
和其他元素都在一行上;元素的高度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的文字或图片的宽度，不可改变
3.1.3.行内块状元素
和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置
总结
本文总结了HTML的表单和常用字符实体的相关知识
4428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
