免費(fèi)AI編程助手
Materialize 窗體
2018-01-05 13:55 更新
Materialise有一個(gè)非常漂亮和響應(yīng)CSS的窗體設(shè)計(jì)。使用以下CSS：
| 序號(hào) | 類(lèi)名稱(chēng)及說(shuō)明 |
|---|---|
| 1 | input-field 將div容器設(shè)置為輸入字段容器。需要。 |
| 2 | validate 將驗(yàn)證樣式添加到輸入字段。 |
| 3 | active 顯示具有活動(dòng)樣式的輸入。 |
| 4 | materialize-textarea 用于設(shè)置文本區(qū)域的樣式。文本區(qū)域?qū)⒆詣?dòng)調(diào)整為其中的文本。 |
| 5 | filled-in 顯示帶有填充框樣式的復(fù)選框。 |
例子
以下示例展示使用輸入類(lèi)來(lái)展示樣本窗體。
materialize_forms.html
<html>
<head>
<title>The Materialize Form Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="/attachments/tuploads/materialize/jquery-2.1.1.min.js"></script>
<script src="/attachments/tuploads/materialize/materialize.min.js"></script>
</head>
<body class="container">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input placeholder="Username" value="Mahesh" id="name" type="text" class="active validate" required>
<label for="name">Username</label>
</div>
<div class="input-field col s6">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password" class="validate" required>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="Email" id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">mode_edit</i>
<textarea id="address" class="materialize-textarea"></textarea>
<label for="address">Address</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="Comments (Disabled)" id="comments" type="text" disabled>
<label for="comments">Comments</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<p>
<input id="married" type="checkbox" checked="checked">
<label for="married">Married</label>
</p>
<p>
<input id="single" type="checkbox" class="filled-in" >
<label for="single">Single</label>
</p>
<p>
<input id="dontknow" type="checkbox" disabled="disabled">
<label for="dontknow">Don't know (Disabled)</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<p>
<input id="male" type="radio" name="gender" value="male" checked>
<label for="male">Male</label>
</p>
<p>
<input id="female" type="radio" name="gender" value="female" checked>
<label for="female">Female</label>
</p>
<p>
<input id="dontknow1" type="radio" name="gender" value="female" disabled>
<label for="dontknow1">Don't know (Disabled)</label>
</p>
</div>
</div>
</form>
</div>
</body>
</html>
結(jié)果
驗(yàn)證結(jié)果，如下圖所示。
重要輸入控件
Materialize提供了許多類(lèi)型的輸入控件的CSS。下面的表格細(xì)節(jié)相同。
| 序號(hào) | 輸入類(lèi)型名稱(chēng)及說(shuō)明 |
|---|---|
| 1 | Select 各種類(lèi)型的選擇輸入。 |
| 2 | Switches 各種類(lèi)型的開(kāi)關(guān)。 |
| 3 | File 各種類(lèi)型的文件輸入。 |
| 4 | Range 各種類(lèi)型的范圍輸入。 |
| 5 | Date Picker 日期選取器。 |
| 6 | Character Counter 字符計(jì)數(shù)器 |
以上內(nèi)容是否對(duì)您有幫助：
更多建議：