您的位置：首页 > Web前端 > HTML

HTML学习08-表单标签

2017-11-07 21:30 501 查看

一、什么是表单

表单是一个包含表单元素的区域。表单元素允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息。表单使用表单标签（

<form>

）定义。

常用属性：

·action–表单提交到的位置；

·method–表单的提交方式，默认为GET方式。

二、输入标签

多数情况下被用到的表单标签是输入标签（

<input>

）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

1.text文本框（用户可以在文本框中输入文本内容）

常用属性：

·value–文本框输入的内容，用于提交给服务器；

·size–文本框长度（字符）；

·maxlength–输入的最大长度（字符）；

·readonly–设置文本框为只读，不能输入内容；

·disable–设置文本框为不能选择状态。

·placeholder–提示信息（显示在框中）。

2.password密码（用圆点代替显示输入的内容）

常用属性：

·size–密码框的长度；

·value–密码框中输入的内容。

3.hidden隐藏框（不显示）

4.radio单选按钮

常用属性：

·name–用于分组，name相同的选项只能选择一个；

·value–此选项的值，用于提交给后台，不会在页面上显示；

·checked–默认选中。

5.checkbox多选按钮（name相同可以选择多项）

属性类似于radio。

6.button普通按钮（调用JS代码实现动态效果）

·value–按钮显示的值。

7.submit提交按钮（将表单中的内容提交；没写name属性的输入项不会被提交）

8.reset重置按钮（回到初始状态）

9.image图片按钮（将图片当做按钮）

常用属性：

·src–图片路径

·width,height……

10.file文件按钮（用于提交文件）

11.下拉框选项

属性：

·name–下拉框的名称。

下拉框中的元素

<option>内容</option>

option的属性：

·value–选项的值，用于提交给服务器。

·selected–默认选中此option。

三、示例

运用常用表单标签编写一个注册页面。

效果：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<table border="0px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--logo部分：1行两列-->
<tr>
<td>
<table width="100%">
<tr>
<td height="100px" width="50%" align="right"><img src="img/tomcat.jpg" height="100%"/></td>
<td height="100px" width="50%"><h1>注册新用户</h1></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="500px" width="100%">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm">
<table border="0px" width="750px" height="500px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td></td>
<td></td>
</tr>
<tr>
<td align="right">
用户名：
</td>
<td>
<input type="text" name="user" size="34px"/>
</td>
</tr>
<tr>
<td align="right">
密码：
</td>
<td>
<input type="password" name="password" size="34px"/>
</td>
</tr>
<tr>
<td align="right">
确认密码：
</td>
<td>
<input type="password" name="repassword" size="34px"></input>
</td>
</tr>
<tr>
<td align="right">
姓名：
</td>
<td>
<input type="text" name="username" size="34px"/>
</td>
</tr>
<tr>
<td align="right">
性别：
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td align="right">
爱好：
</td>
<td>
<input type="checkbox" name="hobby" value="时政要闻"/>时政要闻
<input type="checkbox" name="hobby" value="娱乐八卦"/>娱乐八卦
<input type="checkbox" name="hobby" value="体育运动"/>体育运动
<input type="checkbox" name="hobby" value="健康养生"/>健康养生
</td>
</tr>
<tr>
<td align="right">
出生日期：
</td>
<td>
<select name="year">
<option>--选择年份--</option>
<option value="1996">1996</option>
<option value="1996">1997</option>
<option value="1996">1998</option>
<option value="1996">1999</option>
<option value="1996">2000</option>
</select>
<select name="year">
<option>--选择月份--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
</tr>
<tr>
<td align="right">
上传照片：
</td>
<td>
<input type="file" name="img" />
</td>
</tr>
<tr>
<td align="right">
<input type="reset" value="重新输入"/>
</td>

a5a4
<td align="left">
     <input type="submit" value="注册" />
</td>

</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航