ionic.css界面组件：表单

表单输入与Ionic组件应用

最新推荐文章于 2025-09-08 10:56:58 发布

转载最新推荐文章于 2025-09-08 10:56:58 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2395167/blog/492155

文章标签：

#python

本文介绍如何使用Ionic框架创建表单输入组件，包括文本输入、密码输入、选择框等常见元素，并展示了预定义样式的应用实例。

2019独角兽企业重金招聘Python工程师标准>>>

1、输入组件容器：

不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：

<div class="item-input">
    <label class="input-label">用户名</label>
    <input type="text" placeholder="请输入你的用户账号">
</div>

ionic预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用输入组件的样式：

example:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
	<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
        <!--头部-->
	<div class="bar bar-header">
		<h1 class="title">表单输入</h1>
	</div>
	
	<div class="scroll-content has-header padding">
	
		<div class="item-input">
			<span class="input-label">账号</span>
			<input type="text" placeholder="zhang san">
		</div>
		
		<div class="item-input">
			<span class="input-label">口令</span>
			<input type="password" placeholder="********">
		</div>
	</div>
</body>
</html>

转载于:https://my.oschina.net/u/2395167/blog/492155