9.HTML表单

<form name="表单名字" action="提交地址" method="get/post">
    <!--表单内容-->
</form>

name属性用于设置表单的名称，这一属性不是表单的必须属性，但为了防止表单在提交到后台处理程序时出现混乱，一般要设置与功能相符的名称

action属性用于设置表单的提交地址，当用户写完表单后，单机提交按钮，浏览器将表单信息提交至指定的URL进行处理。

method属性用于设置表单的提交方式，其值只能为get和post两种，默认为get。

        使用get传送速度会更快，但数据不能太长

        使用post相对而言比get要慢，但数据长度没有限制。且比起get来安全性更高。

---

<form name="表单名字" action="提交地址" method="get/post">
    <input type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度">
</form>

表单元素

属性	说明
type	指定表单元素的内容。 可用的选项有：text、password、checkbox、radio、submit、reset、file、hidden、image、button 默认为text
name	表单元素的名称
value	指定表单元素的初始值。 如果是按钮类型则为按钮中显示的名字
size	指定表单中元素的初始宽度
maxlength	指定可在text、password中指定输入的最大长度字符串。 默认无限制。
checked	此属性只有一个值，checked。表示被选中状态。 如不选中，则无需添加属性。
readonly	当文本框的readonly标签被定义为readonly时。 文本框中的值不允许被改变

<form name="表单名字" action="提交地址" method="get/post">
    text:<input type="text" value="text"><br>
    password:<input type="password" value="password"><br>
    checkbox:<input type="checkbox" value="checkbox"><br>
    radio:<input type="radio" value="radio"><br>
    submit:<input type="submit" value="submit"><br>
    reset:<input type="reset" value="reset"><br>
    file:<input type="file" value="file"><br>
    hidden:<input type="hidden" value="hidden"><br>
    image:<input type="image" value="image"><br>
    button:<input type="button" value="button"><br>
</form>

名称相同的单选按钮(radio)只能选中一个

使用required属性表示元素中的内容不能为空白

<form name="表单名字" action="提交地址" method="get/post">
    text:<input type="text" required="required"><br>
	提交：<input type="submit" value="提交">
</form>

 类型匹配验证：

属性	作用
e-mail	在提交表单时，自动验证是否符合e-mail要求
url	在提交表单时，自动验证是否符合url格式要求
number	在提交表单时，自动验证是否为数字
range	在提交时自动验证是否在指定的范围内的数字 使用配合属性：min(最小值)、max(最大值)、step(每次增长值) 显示为滚动条
date	用于选取年、月、日

自定义提示错误内容：

<form name="表单名字" action="提交地址" method="get/post">
    <input required="required" oninvalid="setCustomValidity('自定义内容')">
    <br>
    提交：<input type="submit" value="提交">
</form>

---

<textarea name="指定名称" cols="指定列数" rows="指定行数">
	
</textarea>

textarea多行文本域用于显示或输入两行或两行以上的文本

---

<form name="表单名字" action="提交地址" method="get/post">
	<select name="列表的名称" size="显示的行数">
		<option value ="可选择的值1">展示1</option>
		<option value ="可选择的值2">展示2</option>
		<option value ="可选择的值3">展示3</option>
	</select>
</form>

select下拉框，作用是可以使用户快速，方便，正确的选择一些选项。还可以节省界面空间。

每个选项用option来表示。

        在option标签中设置selected属性表示默认显示

<form name="表单名字" action="提交地址" method="get/post">
	<select name="列表的名称" size="显示的行数">
		<option value ="可选择的值1">展示1</option>
		<option value ="可选择的值2" selected="selected">展示2</option>
		<option value ="可选择的值3">展示3</option>
	</select>
</form>