html5基础知识第三章表单

最新推荐文章于 2021-06-18 12:54:38 发布

ITDragon龙

最新推荐文章于 2021-06-18 12:54:38 发布

阅读量6.1k

点赞数 1

分类专栏： html5 前端技术文章标签： html5

本文链接：https://blog.csdn.net/qq_19558705/article/details/49834801

版权

前端技术同时被 2 个专栏收录

20 篇文章 13 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

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

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

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

表单结构：

<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/

ITDragon龙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5基础知识第三章表单

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

扫一扫

专栏目录