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
value
input元素的值
maxlength
number
输入字段中字符的最大长度
readonly
readonly
输入字段为只读
checked
checked
input元素首次加载时被选中
disabled
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>