表单的基本标签
表单中所有字段都要写在如下标签中,定义整个表单;action指定提交这个表单是执行处理程序。当用户提交表单时,服务器会根据action指定的程序处理表单内容。
传递方式有get和post
<form action="执行程序地址" method="传递方式"> </form>
<input>标签
<input type="类型" name="名称" value="取值">
type可以选择如下类型:text文本框、button按钮、Checkbox复选框、radio单选框、hidden隐藏域、image图片、password密码输入框、submit提交按钮、reset重置按钮、file文件域 ;name表示表单元素的名称,一般要指明name属性,value为表单元素的默认值。
<textarea>定义多行文本输入控件,文本区可容纳无限数量的文本,默认字体是等宽字体。可通过rows和cols来规定<textarea>尺寸
<textarea name="名称" cols="列数" row="行数" wrap="换行方式">文本内容</textarea>
<select>标签生成列表
<select multiple size="可见选项数">
<option value="值"> </option>
</select>
表单基本属性
action属性:指定表单提交到哪个地址进行处理
<form action="处理程序">...</form>
name属性:不是必须的,只是为了区别提交到后台的表单,以免出现混乱,设置属性时不能有空格或者特殊符号
<form name="表单名称">.....</form>
method属性:指定表单中数据提交到服务器时使用的HTTP,取值可以是get或者post.区别:post传送是表单数据包含在表单主题中,然后被送到处理程序上。get的传送方法是表单数据被传送到action属性指定的URL,然后这个新的URL被送到处理程序上
<form method="传送方式">....</form>
enctype属性:设置表单信息提交的编码方式,默认为url-encoded
<form enctype="编码方式">...</form>
target属性:指定目标窗口的打开方式,有_top._blank._parent._self
<form target="窗口打开方式">...<form>
插入表单对象
文本域:访问者自己输入内容的表单对象,如姓名、地址等。语法如下:
<input name="空间名称" type="text" value="字段默认值 size="控件长度" maxlength="最长字符数">
type:用来指定插入哪个表单元素 name:文字字段的名称 value:用来定义文本框的默认值 size:义字符为单位确认文本框在页面显示的长度 maxlength:设定最多可以输入的字符数
密码域:一种特殊的文字字段,密码在输入时字符通常是不可见的,确保安全
<input name="控件名称" type="text" value="字段默认值" size="控件的长度" maxlegth="最长字符数">
普通按钮:可以单击的按钮,button一般情况下需要配合脚本进行表单处理
<input name="按钮名称" type="button" value="按钮的值" onclick="处理程序">
value的值为显示在按钮上的文字
单选按钮:圆形小按钮,为用户提供可选择选项
<input name="按钮名称" type="radio" value="按钮的值" checked/>
复选框:可以让用户选择多个选项
<input name="复选框名称" type="checkbox" value="复选框的值" checked/>
提交按钮:把用户在表单中的信息进行提交
<input name="按钮名称" type="submit" value="按钮名称"/>
重置按钮:清除用户在页面上输入的信息
<input name="按钮名称" type="reset" value="按钮名称"/>
图像按钮:为按钮添加图像,更美观
<input name="按钮名称" type="image" src="图像路径" />
隐藏域:在传送数据时需要对用户不可见,需要用hidden属性进行隐藏
<input name="名称" type="hidden" value="取值"/>
文件域:上传文件或者给表单添加图片时会用到
<input name="名称" type="file" size="控件长度" maxlength="最长字符数"/>
菜单和列表:下拉菜单可以节省空间,下拉菜单宽度是由最长的字符串表示的。相禁用某一个项目但是又想显示,用disabled属性。
<select name="下拉菜单名称">
<option value="选项值" selected>下拉菜单内容
</select>
列表项: 把所有选项都罗列出来,如果size过小的话,会出现滚动条,拖动滚动条就可以显示所有内容。