HTML表单的类型和使用方法

来源：互联网发布：mac office下载编辑：程序博客网时间：2024/05/23 11:57

在<form>标签内定义的<input>标签有很重要的地位，这个标签是个单个标签。<input type>可以用来定义一个表单的类型，一共有10中表单类型。

HTML中<input>标签的属性

属性

值

描述

aceerpt

mime_type

文件上传来提交的文件类型

align

left

左对齐

right

右对齐

top

上对齐

middle

居中对齐

bottom

下对齐

alt

text

图像输入的文字描述

type

text

单行文字输入文本框

password

密码框

button

普通的按钮

submit

提交按钮，会把表单中的数据发送到服务器

reset

重置按钮,会清空表单中的所有数据

radio

单选按钮

checkbox

复选框

hidden

隐藏的输入字段

file

输入字段和浏览按钮，供文件上传

image

图像形式的提交按钮

name

field_name

控件的名称

value

input元素的值

maxlength

number

输入字段中字符的最大长度

readonly

输入字段为只读

checked

input元素首次加载时被选中

disabled

当input元素加载时禁用此元素

2. 除了input表单的类型外，还可以定义多行文本框 ,用标签<textarea></textatea>定义一个多行文本框

3.用<select></select>标签定义一个下拉列表框，此标签具有selected和value属性，seleted属性用来指定默认的选项，value属性用来和<option>标签指定的那一个选项赋值，这个值是用来传送到服务器上的。

<html><span style="white-space:pre"></span><head><title>表单设计综合练习</title></head><span style="white-space:pre"></span><body><span style="white-space:pre"></span><!--设计一个表格 居中对齐，宽度500 边框线宽度为0 单元格内容与边框的像素为2，单元格直接的间距为0--><span style="white-space:pre"></span><table align="center" width="500" border="0" cellpadding="2" cellspacing="0"><span style="white-space:pre"></span><caption><h2>员工信息</h2></caption> <!--表格的标题--><span style="white-space:pre"></span><form action="123.php" method="post"> <!--定义个表单用POST方式提交到《123.php》--><span style="white-space:pre"></span><!---------------创建文本框-------------------------------><span style="white-space:pre"></span><tr>  <!--插入一行表格--><span style="white-space:pre"></span><th>姓名</th> <!--表头--><span style="white-space:pre"></span><!--表格的数据标签是一个文本框，控件名为username长度为30字符数--><span style="white-space:pre"></span><td><input type="text" name="username" size="30"></td><span style="white-space:pre"></span></tr><span style="white-space:pre"></span><!---------------创建文本框-------------------------------><span style="white-space:pre"></span><tr>  <!--插入一行表格--><span style="white-space:pre"></span><th>密码</th> <!--表头--><span style="white-space:pre"></span><!--表格的数据标签是一个文本框，控件名为username长度为30字符数--><span style="white-space:pre"></span><td><input type="password" name="paseeword" size="30"></td><span style="white-space:pre"></span></tr><span style="white-space:pre"></span><!---------------创建单选框按钮-------------------------------><span style="white-space:pre"></span><tr>  <!--插入一行表格--><span style="white-space:pre"></span><th>性别</th> <!--表头--><span style="white-space:pre"></span><!--创建一个单选按钮 默认选中状态--><span style="white-space:pre"></span><td><input type="radio" name="性别" value="0" checked>女<span style="white-space:pre"></span><input type="radio" name="性别" value="1" >男<span style="white-space:pre"></span></td><span style="white-space:pre"></span></tr><span style="white-space:pre"></span><!----------------创建复选框------------------------------><span style="white-space:pre"></span><tr>  <!--插入一行表格--><span style="white-space:pre"></span><th>工作内容</th> <!--表头--><span style="white-space:pre"></span><!--创建一个单选按钮 默认选中状态--><span style="white-space:pre"></span><td><input type="checkbox" name="销售" value="0" checked>销售<span style="white-space:pre"></span><input type="checkbox" name="售后" value="1" >售后<span style="white-space:pre"></span><input type="checkbox" name="客服" value="2" >客服<span style="white-space:pre"></span><span style="white-space:pre"></span></td><span style="white-space:pre"></span></tr><span style="white-space:pre"></span><!----------------创建下拉列表框------------------------------><span style="white-space:pre"></span><tr>  <!--插入一行表格--><span style="white-space:pre"></span><th>部门</th> <!--表头--><span style="white-space:pre"></span><!--创建一个单选按钮 默认选中状态--><span style="white-space:pre"></span><td><span style="white-space:pre"></span><select name="部门"><span style="white-space:pre"></span><option value="1">销售部</option><span style="white-space:pre"></span><option value="2">经理部</option><span style="white-space:pre"></span><option value="3">主管部</option><span style="white-space:pre"></span><option value="4">售后部</option><span style="white-space:pre"></span></select><span style="white-space:pre"></span></td><span style="white-space:pre"></span><span style="white-space:pre"></span></tr><span style="white-space:pre"></span><!----------------创建下创建多行文本框------------------------------><span style="white-space:pre"></span><tr>  <!--插入一行表格--><span style="white-space:pre"></span><th>个人情况</th> <!--表头--><span style="white-space:pre"></span><!--创建一个单选按钮 默认选中状态--><span style="white-space:pre"></span><td><span style="white-space:pre"></span><!--创建一个多行文本框，每行40个字符，共4行--><span style="white-space:pre"></span><textarea name="个人情况" rows="5" cols="50"></textarea><span style="white-space:pre"></span></td><span style="white-space:pre"></span></tr><span style="white-space:pre"></span><!----------------创建按钮------------------------------><span style="white-space:pre"></span><tr>  <!--插入一行表格--><span style="white-space:pre"></span> <span style="white-space:pre"></span><!--创建一个单选按钮 默认选中状态--><span style="white-space:pre"></span><td colspan="3" align="center"><span style="white-space:pre"></span><input type="submit" name="submit" value="提交"><span style="white-space:pre"></span><input type="reset" name="reset" value="重置"><span style="white-space:pre"></span><input type="button" name="button" value="普通按钮"><span style="white-space:pre"></span></td><span style="white-space:pre"></span></tr><span style="white-space:pre"></span><span style="white-space:pre"></span></form><span style="white-space:pre"></span></table><span style="white-space:pre"></span><span style="white-space:pre"></span></body></html>

0 0