HTML--Form 表单
2017-08-08 00:00
281 查看
摘要: HTML学习
1.效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form表单</title>
</head>
<body>
<h2 align="center">注册</h2>
<!--<form></form>有两个属性 一个是action是表示要将数据提交到的地方（如服务器） 另一个是请求方式（主要GET默认的可以在搜索栏看到提交的信息 另一个是POST它提交的信息我们在搜索栏看不到提交的信息 安全切上传文件大小不限制）-->
<!--表单必须用form标签来写-->
<form action="#" method="get">
<!--1.
作者：offline
时间：2017-08-08
描述：input 框
-->
<table align="center" bgcolor="greenyellow">
<tr>
<td align="right" >用户名 :</td>
<td><input type="text" name="username" placeholder="请输入姓名" size="50px" maxlength="10" autofocus="autofocus" /> </td>
</tr>
<tr>
<td align="right">密 码：</td>
<td><input type="password" name="password" placeholder="请输入密码" size="50px" /></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" size="50px" placeholder="请确认密码" />
</tr>
<br />
<!--2.
作者：offline
时间：2017-08-08
描述：单选按钮
-->
<tr>
<td align="right">性 别：</td>
<td> <input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女</td>
</tr>
<!--3.
作者：offline
时间：2017-08-08
描述：浮选按钮
-->
<tr>
<td align="right">爱好： </td>
<td><input type="checkbox" name="hobby" value="1" checked="checked"/>看书
<input type="checkbox" name="hobby" value="2" />跑步
<input type="checkbox" name="hobby" value="3" />旅行
<input type="checkbox" name="hobby" value="4" />玩游戏
</td>
</tr>
<!--4.
作者：offline
时间：2017-08-08
描述：下拉框选择select
-->
<tr>
<td align="right">籍贯：</td>
<td>
<select name="city">
<option value="010" selected="selected">北京</option>
<option value="029">西安</option>
<option value="024">沈阳</option>
<option value="021">上海</option>
</select>
</td>
</tr>
<!--5.
作者：offline
时间：2017-08-08
描述：图像
-->
<tr>
<td align="right">照片：</td>
<td>
<input type="file" name="photo">
</td>
</tr>
<!--6.
作者：offline
时间：2017-08-08
描述： 邮箱
-->
<tr>
<td align="right">邮箱：</td>
<td><input type="email" placeholder="请输入邮箱" required="required" name="email" style="width: 380px;"/ ></td>
</tr>
<!--7.
作者：offline
时间：2017-08-08
描述：textarea
-->
<tr>
<td align="right">自我介绍：</td>
<td>
<textarea placeholder="自我介绍" style="width: 380px;" name="self"></textarea>
</td>
</tr>
<!--8.
作者：offline
时间：2017-08-08
描述：注册按钮，就是提交 将数据上传
-->
<tr>
<td align="right">注册:</td>
<td> <input type="submit" id="save"/></td>
</tr>
<!--9.
作者：offline
时间：2017-08-08
描述：重置 按钮
-->
<tr>
<td align="right">重置</td>
<td><input type="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
1.效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form表单</title>
</head>
<body>
<h2 align="center">注册</h2>
<!--<form></form>有两个属性 一个是action是表示要将数据提交到的地方（如服务器） 另一个是请求方式（主要GET默认的可以在搜索栏看到提交的信息 另一个是POST它提交的信息我们在搜索栏看不到提交的信息 安全切上传文件大小不限制）-->
<!--表单必须用form标签来写-->
<form action="#" method="get">
<!--1.
作者：offline
时间：2017-08-08
描述：input 框
-->
<table align="center" bgcolor="greenyellow">
<tr>
<td align="right" >用户名 :</td>
<td><input type="text" name="username" placeholder="请输入姓名" size="50px" maxlength="10" autofocus="autofocus" /> </td>
</tr>
<tr>
<td align="right">密 码：</td>
<td><input type="password" name="password" placeholder="请输入密码" size="50px" /></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" size="50px" placeholder="请确认密码" />
</tr>
<br />
<!--2.
作者：offline
时间：2017-08-08
描述：单选按钮
-->
<tr>
<td align="right">性 别：</td>
<td> <input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女</td>
</tr>
<!--3.
作者：offline
时间：2017-08-08
描述：浮选按钮
-->
<tr>
<td align="right">爱好： </td>
<td><input type="checkbox" name="hobby" value="1" checked="checked"/>看书
<input type="checkbox" name="hobby" value="2" />跑步
<input type="checkbox" name="hobby" value="3" />旅行
<input type="checkbox" name="hobby" value="4" />玩游戏
</td>
</tr>
<!--4.
作者：offline
时间：2017-08-08
描述：下拉框选择select
-->
<tr>
<td align="right">籍贯：</td>
<td>
<select name="city">
<option value="010" selected="selected">北京</option>
<option value="029">西安</option>
<option value="024">沈阳</option>
<option value="021">上海</option>
</select>
</td>
</tr>
<!--5.
作者：offline
时间：2017-08-08
描述：图像
-->
<tr>
<td align="right">照片：</td>
<td>
<input type="file" name="photo">
</td>
</tr>
<!--6.
作者：offline
时间：2017-08-08
描述： 邮箱
-->
<tr>
<td align="right">邮箱：</td>
<td><input type="email" placeholder="请输入邮箱" required="required" name="email" style="width: 380px;"/ ></td>
</tr>
<!--7.
作者：offline
时间：2017-08-08
描述：textarea
-->
<tr>
<td align="right">自我介绍：</td>
<td>
<textarea placeholder="自我介绍" style="width: 380px;" name="self"></textarea>
</td>
</tr>
<!--8.
作者：offline
时间：2017-08-08
描述：注册按钮，就是提交 将数据上传
-->
<tr>
<td align="right">注册:</td>
<td> <input type="submit" id="save"/></td>
</tr>
<!--9.
作者：offline
时间：2017-08-08
描述：重置 按钮
-->
<tr>
<td align="right">重置</td>
<td><input type="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML ------ 关于表单 Form
- 提交表单存在html标签报错-检测到有潜在危险的 Request.Form 值
- html入门(2)--表单form
- 黑马程序员--HTML基础之Form表单
- JS 提交表单2-Query Ajax post(json数组，form表单经serialize()序列化，html拼接)
- HTML：关于form表单的重置按钮
- HTML table、form表单标签的介绍
- HTML的表单form以及form内部标签
- form表单action提交的js部分与html部分
- HTML table、form表单标签的介绍
- HTML表单Form中的get和post方法
- HTML:Form表单标签的Enctype属性的作用及应用示例介绍
- HTML－－表单(FORM)标记(TAGS)
- form 表单提交, html中ID, name 的区别
- HTML教程：form表单中Enctype属性的用法
- form表单和ajax表单提交（Html.BeginForm()、Ajax.BeginForm()）的差别
- HTML表单Form中的get和post方法：
- HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析
- HTML:form表单总结，input，select，option，textarea，label
- html->form表单