表单

282 阅读3分钟

第一章:表单的基本结构

表单语法:

<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请求体的一部分
  • 对所发送信息的数量无限制
  • 一般用于修改服务器上的资源