012---表单、下拉菜单和表单域

一、表单基本语法形式

完整的表单由表单域、提示文本、表单控件组成。

1.输入框控件：input

<input/>

是一个单标签，效果如下（左图鼠标没有放进去，右图鼠标点击后）：

input控件的属性：

注意：

①对于单选按钮，如果一组有两个，那么给这两个控件设置同一个name值，那么就可以二选一。如：

性别：	<input type="radio" name="sex" />女
		<input type="radio" name="sex" />男

那么如下图，男、女只能选一个，不可多选：

如果没有设置相同的name值，那么就会出现以下情况：

②如果要默认选中则可以这样：

	性别：	<input type="radio" checked="checked" />女
		<input type="radio"/>男<br/>

那么就会默认选中那一项：

③提交、重置、普通按钮

<input type="button" value="普通按钮" /><br/><br/>
<input type="submit"/ value="提交"><br/><br/>
<input type="reset"/ value="重置按钮">

④maxlength

用户名：<input type="text" value="请输入用户名" /><br/>
密码：	<input type="password" maxlength="6" /><br/>

效果：

密码只能输入6个，并且text的输入框的value值可以在输入的时候删除，这时候的value值起到提示的作用。

2. 文本域textarea（双标签）

类似于网友评价，留言等

<textarea></textarea>

输入的内容多的话会自动换行，如果很多，还会出现滚动条。并且用鼠标拉动它的右下角红箭头的部分，它的大小会发生变化。如下图：

在HTML中可以通过属性cols控制文本域的每行的字符数，通过属性rows控制显示的行数。但在学过CSS后可以直接通过设置文本域的宽和高来对文本域进行限制，所以这个很少使用。

二、下拉菜单

基本语法：

<select name="" id="">
	<option value="">点击进行选择</option>
	<option value="">1</option>
	<option value="">2</option>
	<option value="">3</option>
</select>

效果：

如果需要设置默认选中哪一个可以使用selected。如：

<select name="" id="">
	<option value="">点击进行选择</option>
	<option value="" selected="selected">1</option>
	<option value="">2</option>
	<option value="">3</option>
</select>

就会：

三、表单域

语法：

<form action="xxx.php" method="post/get" name="userMSG">
	.....
</form>

解释：

①action表示将表单域里面的内容提交到xxx.php，其中xxx.php是PHP文档。

②method表示表单域里的内容以何种方式提交，有两种方式，分别是post和get

③name表示此表单域里的内容表示哪一类，如登入人信息、学生学籍等

例如：

<form action="xxx.php" method="post/get" name="userMSG">
	用户名：<input type="text" value="请输入用户名" /><br/>
	密码：	<input type="password" maxlength="6" /><br/>
	性别：	<input type="radio" checked="checked" />女
		<input type="radio"/>男<br/><br/>

	<input type="button" value="普通按钮" /><br/><br/>
	<input type="submit"/ value="提交"><br/><br/>
	<input type="reset"/ value="重置按钮">
</form>

这样就可以进行提交，并且可以重置。