HTML form表单、表单控件

form表单

功能

提交数据给服务器

表单的基本结构

	<!--表单域-->
<form action="提交地址">
	<input name="key" type="text">
	<input type="sumbit">
</form>

表单提交数据的条件

• 表单控件位于form表单域以内
• 必须要有提交按钮，需要一个input标签，它的type值为sumbit

method安全方式

当method="get时"不安全，内容在地址栏可见
当method="post"时安全，内容在地址栏会乱码隐藏

说明标签label

关联控件一

<label for="id名称">提示文字：</label>
<input type="text" id="id名称">

关联控件二

<label>
    提示文字：
    <input type="text">
</label>

对其它控件进行解释说明的辅助标签
for属性应与相关的元素属性相同，点击会触发控件

控件 文本框

<input type="text">

基本的文本输入控件，只能输入单行文本，输入的内容可见

控件 密码框

<input type="password">

密码输入框，输入的内容看不见，以小黑点显示

控件 单选框

<input name="控件名称" type="radio" value="提交的值">显示内容1
<input name="控件名称" type="radio" value="提交的值">显示内容2

checked默认勾选
单选框，一定要给name值
具有相同name值的单选框有互斥的效果

控件 复选框

<input type="checkbox" name="控件名称1" value="提交的值">显示的内容1
<input type="checkbox" name="控件名称2" value="提交的值">显示的内容2

checked默认勾选
当复选框与label连用时，鼠标指针悬浮在显示内容上也会点击到按钮

控件 普通按钮

<input type="button" value="按钮文字">

控件 提交按钮

<input type="submit" value=按钮文字

提交去向为action的位置

控件 清空按钮

<input type="reset" value=按钮文字>

点击会清空已输入的内容

控件 图片按钮

<input type="image" src=图片的路径>

控件 文件域

<input type="file">

标签 文本域

<textarea>
	输入的文本
</textarea>

标签 下拉框

 <select name="名称">
        <option value="传输值1">显示值1</option>
        <option value="传输值n">显示值n</option>
    </select>

selected默认选中

当属性名与属性相同时，可以简写
如：selected="selected"简写成selected