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

html5基础知识第三章表单

2015-11-14 12:02 671 查看

以下内容是学习期间整理，有些语句是便于理解，便于快速入门写的。并不权威

。

表单是灰常重要的内容；灰常重要的内容；灰常重要的内容；重要的事情说三遍。表单直接与后台挂钩，想现在的登入界面都是用表单提交用户的帐号密码传给后台，后台判断再反馈信息给用户。非常重要又非常简单

一下只是单纯的页面，没有交互代码，放心去学吧

表单结构：

<form>
<input type=""/>
</form>

带按钮的表单：

<form action="form.do" method="post">
username:  <input type="text" name="user" />
<input type="submit" value="submit" />
</form>

input 的 type 全部属性可以参考 w3school

常用的：

文本框：text 输入内容可见

密码框：password 输入内容不可见

邮箱框：email 输入内容必须是email格式

单选框：radio 只能选择一个内容

复选框：checkbox 可以选择多个内容

按钮：button / submit

radio和checkbox可以选择使用select2，个人觉得挺不错的；为了让页面跟友好，是要用lable标签修饰radio和checkbox的。

button是不能通过键盘Enter点击可以添加js代码解决该问题：

$(document).keydown(function(e){
if (e.keyCode == 13) {
函数();
}
});

具体使用看代码

<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<!--当前页面的三要素-->
<title>html form 表单</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<!--css,js-->
<style type="text/css">
</style>
</head>
<body>
<form>
text:<input type="text" value="我是text" autofocus="autofocus" placeholder="提示内容"/>
<br />
password:<input type="password" value="我是password"/>
<br />
hidden:<input type="hidden" value="我是hidden"/>
<br />
radio:<label><input type="radio" name="sex"/>男</label>
<label><input type="radio" name="sex"/>女</label>
<br />
checkbox:<label><input type="checkbox" name="hobbys"/>shopping</label>
<label><input type="checkbox" name="hobbys"/>sports</label>
<label><input type="checkbox" name="hobbys"/>playing</label>
<br />
textarea:<textarea width="20px" height="10px"></textarea>
<br />
select:
<!--selected 表示默认修饰 disabled 表示禁用,不让选择 size 表示下拉框的大小-->
<select disabled="disabled" size="3">
<option>一月</option>
<option selected>二月</option>
<option>三月</option>
<option>四月</option>
</select>
<br />
file:<input type="file"/>
<br />
table:
<table border="1">
<th colspan="2">跨行</th>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td rowspan="3">3</td>
</tr>
<tr>
<td>跨列</td>
</tr>
<tr>
<td>跨列</td>
</tr>
</table>
<input type="submit" value="submit" />  
<input type="button" value="button" />  
<input type="reset" value="reset" />  
</form>
</body>
</html>

注意点：

第一个文本框一定要加autofocus=“autofocus”

可以友情的添加placeholder=“提示内容”

button不能用回车提交，一般用Ajax提交；submit可以用回车，一般用action提交

单选框和复选框一定要被<lable></label>包住

单选框里面要用name="相同内容"，不然都会被选择到

本人学的是后台java开发，前端只是简单的学习，如有不对的地方可以留言。ITDragon

更多干货等你来拿 http://www.itit123.cn/

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

标签：

相关文章推荐

新的分享

章节导航