表单的学习笔记
表单在一些网页中应用十分广泛,例如登录,筛选,等等方面的东西都需要表单
以及各种按钮,对服务器的上传数据和修改数据等等,都需要通过这些来实现
以下为一些基础的内容
1.表单的应用场景:信息页面
2.表单元素<form></form> 例如:文本域吧、单选框、复选框、按钮……
3.HTML表单
Form标签中,以下标签实现表单元素添加:
标签 描述
<input> 表单输入标签
<select> 菜单和列表标签
<option> 菜单和列表项目标签
<textarea> 文字域标签
<optgroup> 菜单和列表项目分组标签
4.标签实现
(1)<input>标签:<input type="类型属性" name="名称”……/>
<input>标签
Type属性值 描述
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
Button 按钮
Submit 提交按钮
Reset 重置按钮
Hidden 隐藏域
image 图像域
(2)单行文本域
属性 描述
Name 文字域的名称
Maxlength 指用户输入的最大字符长度。这个可以用赖作为密码的限制长度问题
Size 指定文本框的宽度,以字符个数为单位;文本框的缺省宽度是20个字符.
value 指定文本框的默认值
placeholder 规定用户填写输入字段的提示
(3)单选框
<input type="radio" name="……" value="……" checked/>
(4)图像域(图像提交按钮)
<input type="image" name="……" src="imageurl" />
(5)下拉菜单和列表标签
<select>
<option value="……"> 选项</option>
<option value="……"> 选项</option>
</select>
(6)<select>标签属性
属性 描述
name 设置下拉菜单和列表的名称
multiple 设置可选择多个选项
size 设置列表中可见选项数目
(7)<option>标签属性
属性 描述
selected 设置选项初始选中状态
value 定义送往副武器的选项值
(8)分组下拉菜单和列表标签
<select name="">
<optgroup label="组1">
<option value="……">选项</option>
<option value="……">选项</option>
</optgroup>
<optgroup label="组2">
<option value="……">选项</option>
<option value="……">选项</option>
</optgroup>
<select>
(9) 多行文本域<textarea>
<textarea name="……" rows="……" cols="……" > 内容 <textarea>
(10)<form>标签
属性 值 描述
action URL 提交表单时向何处发送表单数据
method get、post 设置表单以何种方式发送到指定页面
name form_name 表单的名称
target _parent、_top_blank、_self 在何处打开action URL
enctype application/x-www-form 在发送表单数据之前如何对其进行编码
-urlencoded multipart/form-data text/plain
1.表单的应用场景:信息页面
2.表单元素<form></form> 例如:文本域吧、单选框、复选框、按钮……
3.HTML表单
Form标签中,以下标签实现表单元素添加:
标签 描述
<input> 表单输入标签
<select> 菜单和列表标签
<option> 菜单和列表项目标签
<textarea> 文字域标签
<optgroup> 菜单和列表项目分组标签
4.标签实现
(1)<input>标签:<input type="类型属性" name="名称”……/>
<input>标签
Type属性值 描述
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
Button 按钮
Submit 提交按钮
Reset 重置按钮
Hidden 隐藏域
image 图像域
(2)单行文本域
属性 描述
Name 文字域的名称
Maxlength 指用户输入的最大字符长度。这个可以用赖作为密码的限制长度问题
Size 指定文本框的宽度,以字符个数为单位;文本框的缺省宽度是20个字符.
value 指定文本框的默认值
placeholder 规定用户填写输入字段的提示
(3)单选框
<input type="radio" name="……" value="……" checked/>
(4)图像域(图像提交按钮)
<input type="image" name="……" src="imageurl" />
(5)下拉菜单和列表标签
<select>
<option value="……"> 选项</option>
<option value="……"> 选项</option>
</select>
(6)<select>标签属性
属性 描述
name 设置下拉菜单和列表的名称
multiple 设置可选择多个选项
size 设置列表中可见选项数目
(7)<option>标签属性
属性 描述
selected 设置选项初始选中状态
value 定义送往副武器的选项值
(8)分组下拉菜单和列表标签
<select name="">
<optgroup label="组1">
<option value="……">选项</option>
<option value="……">选项</option>
</optgroup>
<optgroup label="组2">
<option value="……">选项</option>
<option value="……">选项</option>
</optgroup>
<select>
(9) 多行文本域<textarea>
<textarea name="……" rows="……" cols="……" > 内容 <textarea>
(10)<form>标签
属性 值 描述
action URL 提交表单时向何处发送表单数据
method get、post 设置表单以何种方式发送到指定页面
name form_name 表单的名称
target _parent、_top_blank、_self 在何处打开action URL
enctype application/x-www-form 在发送表单数据之前如何对其进行编码
-urlencoded multipart/form-data text/plain
(11)post和get区别GET:
使用URL传递参数
对所发送信息的数量也有限制
一般用于信息获取
POST:
表单数据作为HTTP请求体的一部分
对所发送信息的数量无限制
一般用于修改服务器上的资源
使用URL传递参数
对所发送信息的数量也有限制
一般用于信息获取
POST:
表单数据作为HTTP请求体的一部分
对所发送信息的数量无限制
一般用于修改服务器上的资源

浙公网安备 33010602011771号