效果图如下：
HTML中常用的表单元素包括：
文本区域，列表框，文本输入框，密码输入框，单选输入框，复选输入框，重置按钮、提交按钮、隐藏域、等等。
作业之一 也是笔记之一 html的表单元素 效果展示 以及基本语法都展示出来了 代码结合了一点css样式
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常见的表单元素</title>
<style type="text/css">
.wbi
{
color:#3737ff;
}
table
{
border:1px;
background-color:#cccccc;
}
td,th
{
background-color:#ffffff;
height:30px;
padding:3px;
}
#tdd
{
text-align:right;
font-size:13px;
}
#tdd1
{
text-align:left;
font-size:14px;
}
#tdd2
{
text-align:left;
font-size:13px;
}
</style>
</head>
<body>
<div align="center">
<table>
<tr>
<th colspan="3">常见的表单元素</th>
</tr>
<!--第1行内容-->
<tr align="center">
<td width="120">名称</td>
<td width="400">效果</td>
<td width="300">语法</td>
</tr>
<!--第2行内容-->
<tr>
<td id="tdd">单行文本域：</td>
<td id="tdd1"><input type="text" name="txt1" /></td>
<td id="tdd2"><input type="<span class="wbi">text</span>" /></td>
</tr>
<!--第3行内容-->
<tr>
<td id="tdd">密码域：</td>
<td id="tdd1"><input type="password" name="txt2" /></td>
<td id="tdd2"><input type="<span class="wbi">password</span>" /></td>
</tr>
<!--第4行内容-->
<tr>
<td id="tdd">单选按钮：</td>
<td id="tdd1">
<input type="radio" name="dx" />男
<input type="radio" name="dx" />女
</td>
<td id="tdd2"><input type="<span class="wbi">radio</span>" /></td>
</tr>
<!--第5行内容-->
<tr>
<td id="tdd">复选框：</td>
<td id="tdd1">
<input type="checkbox" name="fx" />篮球
<input type="checkbox" name="fx1" />排球
<input type="checkbox" name="fx2" />羽毛球
<input type="checkbox" name="fx3" />乒乓球
<input type="checkbox" name="fx4" />足球
</td>
<td id="tdd2"><input type="<span class="wbi">checkbox</span>" /></td>
</tr>
<!--第6行内容-->
<tr>
<td id="tdd">提交按钮：</td>
<td id="tdd1"><input type="submit" name="subm" value="我是一个提交按钮" /></td>
<td id="tdd2"><input type="<span class="wbi">submit</span>" /></td>
</tr>
<!--第7行内容-->
<tr>
<td id="tdd">重置按钮：</td>
<td id="tdd1"><input type="reset" name="rest" value="我是一个重置按钮" /></td>
<td id="tdd2"><input type="<span class="wbi">reset</span>" /></td>
</tr>
<!--第8行内容-->
<tr>
<td id="tdd">普通按钮：</td>
<td id="tdd1"><input type="button" name="butt" value="我是一个普通按钮" /></td>
<td id="tdd2"><input type="<span class="wbi">button</span>" /></td>
</tr>
<!--第9行内容-->
<tr>
<td id="tdd">多行文本域：</td>
<td id="tdd1"><textarea rows="3" cols="30" /></textarea></td>
<td id="tdd2"><textarea></textarea></td>
</tr>
<!--第10行内容-->
<tr>
<td id="tdd">选择列表：</td>
<td id="tdd1">
<select>
<option>第一项</option>
<option>第二项</option>
<option>第三项</option>
<option>第四项</option>
<option>第五项</option>
</select>
</td>
<td id="tdd2"><select></select></td>
</tr>
<!--第11行内容-->
<tr>
<td id="tdd">隐藏域：</td>
<td id="tdd1"><input type="hidden" name="yc" value="隐藏了 你看不到我 哈哈哈嗝" /></td>
<td id="tdd2"><input type="<span class="wbi">hidden</span>" /></td>
</tr>
<!--第12行内容-->
<tr>
<td id="tdd">文件域：</td>
<td id="tdd1"><input type="file" name="wj" value="选择文件" /></td>
<td id="tdd2"><input type="<span class="wbi">file</span>" /></td>
</tr>
</table>
</div>
</body>
</html>
评论 (0)