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：文本框行数