jquerymobile-14 表单基础

在开发的过程中,经常会用到表单进行交互,所以是比较重要的。今天就开始一点有点介绍吧。

对于我发表的文章,都是比较肤浅的,属于入门性的东西,如果你看着感觉在浪费时间,那么请不要拍砖,你去官网上看就可以了。

在开发的过程中,我们经常会用到的就是登录,开始就先写一个页面介绍一下基础:

<!DOCTYPE html>
<html>
<head>
<title>Form Example 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>

<div data-role="page">

	<div data-role="header">
		<h1>Form Demo</h1>
	</div>
	
	<div data-role="content">
		
		<form action="echo.cfm" method="post">
			
		<div data-role="fieldcontain">
		    <label for="name">Name:</label>
		    <input type="text" name="name" id="name" value=""  />
		</div>	

		<div data-role="fieldcontain">
		    <label for="email">Email:</label>
		    <input type="text" name="email" id="email" value=""  />
		</div>	

		<div data-role="fieldcontain">
		    <input type="submit" name="submit" value="登录"  />
		</div>	
		
		</form>

	</div>

</div>

</body>
</html>

这段代码显示如下:

jquerymobile-14 表单基础_第1张图片

在上面的代码中我们使用到了data-role="fieldcontain",这个是为了使被其包围的代码看起来更像一个整体,结果就是在被包围的下面添加了一条横线。其他的作用我也没有发现。

虽然上面的显示效果很好,但是还是有点问题的。如果我们将浏览器的拉宽,那么会有如下的效果:

jquerymobile-14 表单基础_第2张图片

这样就有点偏了,看了一下原因是因为CSS中.ui-field-contain .ui-btn .ui-submit设置了width为78%。 解决他我们只要把按钮包围的data-role="fieldcontain"的div去掉就可以了。可能这个在手机上不会发生,因为手机屏幕就那么大,但是还是了解一下比较好。

你可能感兴趣的:(jquerymobile-14 表单基础)