在<form>标签内定义的<input>标签有很重要的地位,这个标签是个单个标签。<input type>可以用来定义一个表单的类型,一共有10中表单类型。
属性 | 值 | 描述 |
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>