以下内容是学习期间整理,有些语句是便于理解,便于快速入门写的。并不权威。
表单是灰常重要的内容;灰常重要的内容;灰常重要的内容;重要的事情说三遍。表单直接与后台挂钩,想现在的登入界面都是用表单提交用户的帐号密码传给后台,后台判断再反馈信息给用户。非常重要又非常简单
一下只是单纯的页面,没有交互代码,放心去学吧
表单结构:
<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