表单的属性
1.action
此属性指示服务器上处理表彰输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。
语法：action=”URL”
如果action的属性为空，则默认表单提交到本页。
2.method
此属性告诉浏览器如何将数据发送给服务器，它指定服务器发送数据的方法（post还是get）.
post提交不会改变地址栏状态，表单数据不会被显示
get提交，地址栏状态会发生变化，表单数据会在URL中显示
所以POST比GET安全。
3.案例演示：简单的表单提交
效果
image.png
代码：
<body>
<form action="#" method="post">
<p>
名字：<input type="text" name="Username">
</p>
<p>
密码：<input type="password" name="pw">
</p>
<p>
<input type="submit" name="btn" value="提交">
<input type="reset" name="btm" value="重填">
</p>
</form>
</body>
表单元素及格式
在表单中添加表单元素，使用<input>标签
语法：
image.png
image.png
image.png
size是指文本框的长度，maxlength是指输入的数据长度
单选框
image.png
1)type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的
2)同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
3)希望在页面加载时单选按钮有一个默认的选项，则必须使用checked属性，同一组单选按钮只能有一个默认的checked属性
image.png
image.png
复选框
复选框允许用户选择多个选项。
image.png
1)type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。
2)同一组复选框，根据需要可设置name属性值相同，也可不同
3)希望在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有多个复选框有默认的checked属性。
4)一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。
image.png
image.png
列表框
语法：
image.png
<select>标签用户显示可供用户选择的下拉列表，每个选项由<option>来表示；
<select>标签必须包含至少一个<option>标签。
image.png
name和value属性是必须的，其他属性并不是必须的。
size确定可同时看到的行数;
selected默认选中，只能有一个选中项
案例演示：列表框
代码：
image.png
按钮
按钮在表单中经常用到，在HTML中按钮分为3种，分别是普通按钮（button）、提交按钮（submit）和重置按钮（reset）。
普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。
语法：
image.png
图片按钮
image.png
多行文本域
当需要在网页中输入两行或以上的文本时，前面学习的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是<textarea>
语法：
image.png
image.png
文件域
文件域的作用是用于实现文件的选择，在应用时只需要把type属性设置为”file”即可。
在实际操作中，文件域通常用于文件上传的操作，如选择需要上传文本、图片等。
语法：
image.png
语法说明
(1) .type值为file
(2) .在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交
image.png
网友评论