1.<form>元素
HTML中用于创建表单的标签是<form>,表单以<from>开头，以</from>结尾.
2.<form>元素的基本属性
<from>元素通常是用来采集用户输入信息的表单控件，也可以包含其他元素，如段落、标题等。但是，不能包含另一个<from>元素，即<from>元素不能嵌套。
补充：method属性——– method属性指定浏览器向服务器发送表单数据时可以使用的两种方法。
- get ：使用get方法向服务器传送表单数据时，表单数据被附加在<from>元素中有action指定的URL尾部。使用get请求的优点有可以被缓存、能保存在历史记录中、可以被收为书签。缺点有不能在敏感数据中使用、不够安全信息暴露在地址栏上、数据有长度限制（地址栏默认大小64kb）且数据只能读取不能修改。
- post ：使用post方法向服务器传送表单数据时，表单数据在HTTP头部透明的传送。使用post请求的优点有比get安全，不会将信息暴露在地址栏上、对数据长度没有限制。缺点有不可以被缓存、不能保存在历史记录中、不可以被收为书签。
<form action="login.aspx" method="post">
</form>3.<form>表单的输入元素
1.<input>元素
用户输入数据时使用的文本框、复选框、单选按钮等都是通过<input>元素创建的，<input>元素只能在<form>里面使用，用来创建表单的输入元素。
1.type属性
<input>标签的type属性用于指定输入控件，type的值很多，具体用法有：
- text（文本框）—定义单行输入字段，可输入字母、数字等内容，默认20个字符。
- radio（单选按钮）—定义单选按钮，从给定的选项中选其一。
- checkbox（复选框）—定义复选框，从给定的选项选其一或若干选项。
- password（密码框）—定义密码字段，用于输入密码，输入内容以*的形式出现（掩码）。
- submit（提交按钮）—定义”提交“按钮，将表单发送到服务器。
- bottom（单击按钮）—定义普通按钮，用于通过JavaScript启动脚本。
- image（图像按钮）—定义图像形式的提交按钮，用户可以通过不同的图像达到美观的效果。
- hidden（隐藏字段）—定义隐藏的输入字段。
- reset（重置按钮）—定义”重置“按钮，点击重置按钮可清楚表单中的所有数据。
- file（文件域）—定义输入字段和”浏览“按钮，用于上传文件。
- email（e-mail地址）—用于输入单个电子邮件地址或电子邮件地址列表。多个电子邮件地址可以使用逗号分隔的列表形式输入。
- color（颜色选择框）—用于使用色盘选择颜色。
- date（日期）—用于输入日历日期。
- datetime（日期和时间）—用于输入时区为：格林尼治/国际标准时间”的日期和时间。
- datetime-local（日期和时间）—用于输入本地日期和时间。
- month（年和月）—输入年份和月份。
- time（时间）—用于输入由时、分、秒以及小数秒组成的时间。
- week（星期）—输入由年份与周期构成的日期。
- number（数字输入框）—输入数字。
- range（数字滑块）—该控件类型以拖动条的形式呈现，使用户可以从一个数字范围内选择取值。
- search（搜索文本框）—用于输入关键词。
- tel（文本框）—输入电话号码。
- url（网站地址）—输入网站URL。
2.type的其他属性
- name—元素名称。
- id—元素的唯一标识符。
- value—元素的值。
- size—以字符个数设定元素的宽度。
- maxlength—元素接受字符个数的上限。
- checked—元素是否被选中。
- readonly—表示这个元素只读。
- disabled—表示禁用input元素，被禁用的input不可用也不可以点击。
- required—提交信息时如果input是空的时候会提示，不同浏览器提示信息不同。
- autofocus—网页打开时自动获取光标。
<body align="center"> <h3>金冠书城用户调查表</h3> <form> <p>用户名：<input type="text" name="username" autofocus></p> <p>登录密码：<input type="password" name="pwd" required></p> <p>请选择您的性别：<input type="radio" name="gender" value="男">男 <input type="radio" name="gender" value="女">女</p> <p>请选择您喜欢的书籍类型：<input type="checkbox" value="古代言情">古代言情 <input type="checkbox" value="现代言情">现代言情 <input type="checkbox" value="权谋">权谋 <input type="checkbox" value="重生">重生 <input type="checkbox" value="穿越">穿越</p> <p><input type="image" src="1.jpg" width="100" height="150"></p> <p><input type="hidden" value="隐藏的字段"></p> <p><input type="file" > <input type="email"> <input type="color"> <input type="date"> <input type="range"> <input type="tel"></p> <p><input type="reset" value="重置"> <input type="submit" value="提交"> <input type="bottom" value="普通"></p> </form> </body>
效果展示：
2.<label>元素
<label>元素是为<input>定义的标签，不会给用户展示任何样式。
<form>
<label for="username">用户名1：</label>
<input type="text" name="username" id="username" value="zhangsan" >
</form>效果展示：
3.<select>标签
<select>元素用于创建下拉列表，下拉列表中每一个选项是一个<option>元素。
<p>
<select>
<option value="">请选择您的地址：</option>
<option value="重庆">重庆</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="...">...</option>
</select>
</p> 效果展示： 
4.<textarea>标签
<textarea>标签通常用于创建多行文本框，且框可以拉伸。常用的属性有三个，分别是：
- cols—以字符个数设定的多行文本框的宽度。
- rows—以字符个数设定的多行文本框的高度。
<p> <textarea cols="100" rows="10">请用优雅的语言描述一下自己：</textarea> </p>效果展示：
今天的文章html中的form表单_ajax提交form表单数据分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/71657.html
