HTML基础-4
表单格式
<!--
form为表单标签
action属性值代表触发后目的地
method属性规定如何发送数据
-->
<form action="" method="">
<input type="text" name="" value="">
</form>
※method有get和post值;
选择get值,浏览器会将表单数据直接附在url后面,两者用?分隔;
选择post值,浏览器会在与服务器建立联系后,采用分段传输的方式将表单数据传递给服务器,不会在URL中体现表单数据;
input标签
※作用:创建各种表单需用的文本框,通过不同的type赋值实现;
※各浏览器显示的文本框、单选框、复选框等内容会有所不同
<input type="" name="" value="" checked>
name属性为提交后表单对该项数据的标记;
value属性为预设值;
checked属性不需要赋值,用于radio和checkbox类型,表示已选;
<input type="text" maxlength="5">
text为type属性默认值,用于输入单行文档,可通过maxlength设置最大字符长度值;
<input type="password">
password类型的文本框与text相同,区别在于password文本框输入的数据会以星号或原点的形式显示;
<input type="radio" name="user">选项1
<input type="radio" name="user">选项2
<input type="radio" name="user">选项3
单选框:需特别注意,radio的机制为每个name仅可选择一个选项,因此使用radio时需注意设置name值,否则无法实现单选功能;
<input type="checkbox" name="user">选项1
<input type="checkbox" name="user">选项2
<input type="checkbox" name="user">选项3
复选框:可同时选择多个或者零个选项,由于提交后的数据会以?user=on&user=on&user=on#的格式上传,因此需设置统一的name值;
<input type="submit">
提交按钮:点击将以输入的数据提交,可通过value设置按钮上的文本;
<input type="reset">
重置按钮:点击后重置已输入的数据,可通过value设置按钮上的文本;
<input type="file">
文本上传按钮:点击自动弹出选择文件窗口,选中后点击submit可上传指定文件
<input type="image">
图片上传按钮:点击自动弹出选择文件窗口,选中后点击submit可上传指定图片
<input type="email">
邮箱输入文本框:与text文本输入框相同,区别在于在提交时会自动校验所输入的文本是否符合邮箱格式;
<input type="url">
网址输入文本框:与text文本输入框相同,区别在于在提交时会自动校验所输入的文本是否符合网址格式;
<input type="number" min="0" max="100" step="1">
数值输入框:可通过min和max设置数字最小和最大值,通过step设置数值间距;
注意:若取值范围不是取值间距的整数倍时,极值部分无法通过点击按钮获得,例如:min=0 max=5 step=3 value=0;此时点击按钮无法得到数值4和5
<input type="range">
滑块:与数值输入框类似,可通过min和max设置数字最小和最大值,通过step设置数值间距(表现为拖动时,滑块跳跃间距);
select标签
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
下拉选择框;
在option标签内设置selected设置默认项,不设置默认显示项为第一项;
需设置value值,提交表单数据时会显示选择的option选项的value值,而不是option标签内的文本;
textarea标签
<textarea cols="" rows=""></textarea>
cols:文本框列数
rows:文本框行数