HTML学习系列------表单

写在前面

• 表单
• <input>标签
• <select>标签
• <form>标签
• <textarea>多行文本域

---

一、表单

（1）语法：

<form>
	表单元素
</form>

（2）表单元素：

• <input>：输入
• <select>：菜单和列表
• <option>：菜单和列表项目
• <textarea>：多行文本域
• <optgroup>：菜单和列表项目分组

---

二、<input>标签

（1）语法：<input type = "类型属性" name = "名称" ....../>

（2）<input>标签通过type来决定添加的标签类型。

• text：文本域
• password：密码域
• file：文件域
• checkbox：复选域
• radio：单选域
• button：按钮
• submit：提交按钮
• reset：重置按钮
• hidden：隐藏域
• image：图像域

（3）单行文本域

1、语法：

<form>
	<input type = "text" name = "..." .../>
</form>

2、属性：

• name：名称
• maxlength：用户输入的最大字符长度
• size：文本框的宽度，以字符个数为单位；默认为20字符
• value：默认值
• placeholder：提示信息

（4）文件域：

1、语法：

<form>
	<input type = "file" name = "..." .../>
</form>

（5）单选框：

1、语法：

<form>
	<input type = "radio" name = "..." value = "..."  checked />
</form>

注意：同一组name值要相同

（6）复选框：

1、语法：

<form>
	<input type = "checkbox" name = "..." value = "..."  checked />
</form>

（7）按钮：

1、语法：

<form>
	<input type = "button" name = "..." value = "..."  />
</form>

type值可为button、submit或reset

（8）图像域：

1、语法：

<form>
	<input type = "image" name = "..." src = "imageurl"  />
</form>

（9）隐藏域：

1、语法：

<form>
	<input type = "hidden" name = "..." value = "..."  />
</form>

---

三、<select>标签

（1）语法：

<select>
	<option value = "..." >选项</option>
	<option value = "..." >选项</option>
	......
</select>

（2）<select>标签属性：

• name：名称
• multiple：设置可选择多个选项
• size：列表可见选项数

（3）<option>标签属性

• selected：设置选项初始选中状态
• value：定义送往服务器的选项值

---

四、<form>标签

（1）语法：

<form action = " " method = " " name = " " ...>
	表单元素
</form>

（2）属性：

• action：提交表单时向何处（后台用来处理数据的文件）发送表单数据，值为url
• method：设置表单发送到指定页面的方式，值为get（默认）或post
• name：表单名
• target：打开action url的位置，值为_blank、_self、_parent、_top
• enctype：编码，值为application/form-data text/plain等

---

五、<textarea>多行文本域

（1）语法：

<textarea name = "..." rows = "..." cols = "..." ...>
	内容...
</textarea>`

（2）属性：

• name：名称
• placeholder：提示
• rows：可见行数
• cols：可见宽度