第一章:表单的基本结构
表单语法:
<form>
表单元素
</form>
注:表单本身不可见
<form>标签:
| 标签 | 描述 |
|---|---|
<input> |
表单输入标签 |
<select> |
下拉菜单和列表标签 |
<option> |
下拉菜单和列表项目标签 |
<optgroup> |
下拉菜单和列表项目分组标签 |
<textarea> |
文字域标签 |
input标签:
语法:<input type="类型属性" name="名称" ....../>
注:它是一个单标签,没有结束标签
type属性值:
| type属性值 | 描述 |
|---|---|
| text | 文字域 |
| password | 密码域 |
| file | 文件域 |
| checkbox | 复选域 |
| radio | 单选域 |
| button | 按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| hidden | 隐藏域 |
| image | 图像域 |
第二章 表单元素
单行文本域
语法:
<form>
<input type="类型属性" name="名称" ....../>
</form>
属性:
| 属性 | 描述 |
|---|---|
| name | 文字域名称 |
| maxlength | 用户输入的最大字符长度 |
| size | 指定文本框的宽度,以字符个数为单位;文本框的缺省单位是20个字符; |
| value | 指定文本框的默认值 |
| placeholder | 规定用户填写输入字段的提示 |
密码框
语法:
<form>
<input type="password" name="" ....../>
<form>
注:密码域也是文本域的形式,输入到文本域的文字"......"显示
文件域
语法:
<form>
<input type="file" name="" ....../>
<form>
注:不同浏览器,外观显示不同
一种是按钮+文字 另一种是文本框+按钮
单选框
语法:
<form>
<input type="radio" name="" ...... value="..." checked />
<form>
注:同一种的name值要相同
复选框
语法:
<form>
<input type="chechbox" name="" ...... value="..." checked />
<form>
按钮
语法:
<input type="button" name="..." value="..." /> (普通按钮)
<input type="submit" name="..." value="..." /> (提交按钮)
<input type="reset" name="..." value="..." /> (重置按钮)
图像域(图像提交按钮)
语法:
<input type="image" name="..." src="imageurl" />
隐藏域
语法:
<input type="hidden" name="..."value="..." />
下拉菜单和列表标签
优点:节约空间。
语法
<select>
<option value="...">选项</option>
<option value="...">选项</option>
......
</select>
<select>标签属性:
| 属性 | 描述 |
|---|---|
| name | 设置下拉菜单和列表的名称 |
| multiple | 设置可选择多个选项 |
| size | 设置列表中可见选项的数目 |
<option>标签属性
| 属性 | 描述 |
|---|---|
| selected | 设置选项初选中状态 |
| value | 定义送往服务器的选项值 |
分组下拉菜单和列表标签
语法:
<select name=" ">
<optgroup lable="组1">
<option value="...">选项</option>
<option value="...">选项</option>
......
</optgroup>
<optgroup lable="组2">
<option value="...">选项</option>
<option value="...">选项</option>
......
</optgroup>
......
</select>
文本域标签
单行文本域
语法:
<form>
<input type="text" name="..." ...../>
</form>
多行文本域
语法:
<textarea name="..." rows="..." cols="..." ...>
内容......
</textarea>
<textarea>属性
| 属性 | 描述 |
|---|---|
| name | 设置文本区的名称 |
| placeholder | 设置描述文本区域预期值的简短提示 |
| rows | 设置文本区内的可见行数 |
| cols | 设置文本区内的可见宽度 |
注:创建表单时,<table>标签放在<form>内
第三章 表单页面调整
<form标签:
语法:
<form action="" method="" name=""...>
表单元素
</form>
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL | 提交表单时向何处发送表单数据 |
| method | get,post | 设置表单以何种方式发送到指定页面 |
| name | form_name | 表单的名称 |
| target | _blank,_self,_parent,_top | 在何处打开action URL |
| enctype | application/x-www-form-urlencoded multipart/form-date text/plain |
在发送表单之前如何对其进行编码 |
<method>标签post与get的区别:
GET:
- 使用URL传递参数
- 对所发送信息的数量有所限制
- 一般用于信息获取
POST:
- 表单数据作为http请求体的一部分
- 对所发送信息的数量无限制
- 一般用于修改服务器上的资源