1.表单的作用:收集网页的信息
2.表单组成:
提示信息
表单控件
表单域:
表单:<form></form>
<form action="1.php" method="post">
用户名:<input type="text" maxlength="6" readonly="readonly disabled="disabled" name="username" value="前端">
</form>
※form属性:a*ction:处理信息*
method="get | post"
ge
t通过地址栏提供(传输)信息,安全性差。(会在地址栏显示客户输入的信息)
post
通过1.php来处理信息,安全性高。(地址栏显示的是1.php,非客户输入的信息)
文本输入框
<form action="1.php" method="post">
用户名:<input type="text" maxlength="6" name="username" readonly="readonly" disabled="disabled" value="前端">
</form>
属性:maxlength=”6” 限制输入字符的长度
readonly=”readonly” 将输入框设置为只读状态(不能输入编辑)
disabled=”disabled” 输入框未激活状态
name=”username” 输入框的名称,给处理器看
value=”前端” 将输入框的内容传给处理文件(输入框默认显示的文字)
密码输入框
密码:<input type="password" name="pwd">
注:文本输入框的所有属性对密码输入框都有效。
单选框
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
※属性:
1.只有将name的值设置相同时,才能实现单选效果。
2.checked=”checked” 设置默认选中项
下拉列表
1.格式
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
2.下拉列表多选
省(市):<select multiple="multiple">
<option>山西</option>
<option>山东</option>
<option selectd="selected">北京</option>
</select>
※属性:
multiple="multiple"
将下拉列表设置为多选项
selectd="selectd"
设置默认选中项
3.下拉列表分组
市(区):<select>
<optgroup label="北京市">
<option>昌平区</option>
<option>海淀区</option>
</optgroup>
<optgroup label="广州市">
<option>昌平区</option>
<option>海淀区</option>
</optgroup>
</select>
多选框
<input type="checkbox" checked="checked">物理
<input type="checkbox" checked="checked">数学
<input type="checkbox" checked="checked">语文
属性:checked=”checked” 设置默认选中项
多行文本框 设置可输入的文本框
<textarea cols="130" row="10"></textarea>
属性:
cols 控制输入字符的长度。(一个汉字等于两个字符)
rows控制输入的行数
文件上传控件
<input type="file">
文件提交按钮
<input type="submit">
※:可以实现信息提交功能
普通按钮
<input type="button" value="普通按钮">
※不能提交信息,配合JS使用
图片按钮
<input type="image" src="按钮.jpg">
※图片按钮可实现信息提交功能
重置按钮
<input type="reset">
※将所有信息重置到默认原始状态。
给表单信息分组
<filedset></filedset>
对表单信息分组
<legend></legend>
表单信息分组名称
<form>
<fieldest>
<legend>分组信息</legend>
</fieldset>
</form>
表单控件
<form action="1.php" method="post">
<input type="url"> 网址控件
<input type="date"> 日期控件
<input type="time"> 时间控件
<input type="email"> 邮件控件
<input type="number" step="5"> 数字控件(step="5"是数字的步数5步5步的增加)
<input type="range" step="5"> 滑块控件
</form>