metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
1,295 lines • 77 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Forms - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Forms</a></li>
<li class="toc-entry"><a href="#_overview">Overview</a></li>
<li class="toc-entry">
<a href="#_form_controls">Form controls</a>
<ul>
<li class="toc-entry"><a href="#_inputs">Input</a></li>
<li class="toc-entry"><a href="#_tag-input">Tag input</a></li>
<li class="toc-entry"><a href="#_spinner">Spinner</a></li>
<li class="toc-entry"><a href="#_search">Search</a></li>
<li class="toc-entry"><a href="#_select">Select</a></li>
<li class="toc-entry"><a href="#_textarea">Textarea</a></li>
<li class="toc-entry"><a href="#_checkbox">Checkbox</a></li>
<li class="toc-entry"><a href="#_radio">Radio</a></li>
<li class="toc-entry"><a href="#_switch">Switch</a></li>
<li class="toc-entry"><a href="#_file">File browser</a></li>
<li class="toc-entry"><a href="#_form_buttons">Buttons</a></li>
</ul>
</li>
<li class="toc-entry">
<a href="#_layout">Layout</a>
<ul>
<li class="toc-entry"><a href="#_form_groups">Form groups</a></li>
<li class="toc-entry"><a href="#_grid_layout">Grid layout</a></li>
<li class="toc-entry"><a href="#_horizontal_form">Horizontal form</a></li>
<li class="toc-entry"><a href="#_inline_form">Inline form</a></li>
</ul>
</li>
<li class="toc-entry"><a href="#_accent_colors">Accent colors</a></li>
<li class="toc-entry"><a href="#_disabled_forms">Disabled forms</a></li>
<li class="toc-entry">
<a href="#_validation">Validation</a>
<ul>
<li class="toc-entry"><a href="#_validation_how">How it works</a></li>
<li class="toc-entry"><a href="#_validation_browser">Browser defaults</a></li>
<li class="toc-entry"><a href="#_validation_plugin">Use the power, Luke!</a></li>
</ul>
</li>
<li class="toc-entry"><a href="#_forms_rtl">Rtl support</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Forms</h1>
<p class="text-leader">
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
</p>
<!-- ads-html -->
<h3 id="_overview">Overview</h3>
<p>
Metro’s form controls expand on our Rebooted form styles with classes.
Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
</p>
<p>
Be sure to use an appropriate <code>type</code> attribute on all inputs (e.g., <code>email</code> for email address or <code>number</code> for numerical information)
to take advantage of newer input controls like email verification, number selection, and more.
</p>
<div class="example pb-0">
<form class="mb-2">
<div class="form-group">
<label>Email address</label>
<input type="email" placeholder="Enter email"/>
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Enter email"/>
</div>
<div class="form-group">
<input type="checkbox" data-role="checkbox" data-caption="Remember me" title="">
</div>
<div class="form-group">
<button class="button success">Submit data</button>
<input type="button" class="button" value="Cancel">
</div>
</form>
</div>
<pre class=""><code>
<form>
<div class="form-group">
<label>Email address</label>
<input type="email" placeholder="Enter email"/>
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Enter email"/>
</div>
<div class="form-group">
<input type="checkbox" data-role="checkbox" data-caption="Remember me">
</div>
<div class="form-group">
<button class="button success">Submit data</button>
<input type="button" class="button" value="Cancel">
</div>
</form>
</code></pre>
<h3 id="_form_controls">Form controls</h3>
<p>
Metro 4 styling all forms controls with direct styles or special classes. Now supports:
all types of <code><input></code>,
<code><select></code>,
<code><textarea></code>,
<code><checkbox></code> and
<code><radio></code>.
Included are styles for general appearance, focus state, sizing, and more.
</p>
<h4 id="_inputs">Inputs</h4>
<p>
You can use default <code>input</code> or <code>extended input</code>.
</p>
<h6>Default input</h6>
<div class="example pb-0">
<form class="mb-2">
<input type="text" class="mt-1" title="">
</form>
</div>
<pre><code class="html">
<form>
<input type="text" class="mt-1">
</form>
</code></pre>
<h6>Extended input with data-role="input"</h6>
<div class="example pb-0">
<form class="mb-2">
<label>Input</label>
<input type="text" data-role="input" class="mb-1" title="">
<label>Password</label>
<input type="password" data-role="input" class="mb-1" title="">
<label>Input with prepend</label>
<input type="text" data-role="input" class="mb-1" data-prepend="<span class='mif-user'></span>" title="">
<input type="text" data-role="input" class="mb-1" data-prepend="Email" title="">
<label>Input with append</label>
<input type="text" data-role="input" class="mb-1" data-append="<span class='mif-user'></span>" title="">
<input type="text" data-role="input" class="mb-1" data-append="Email" title="">
<label>Input with append & prepend</label>
<input type="text" data-role="input" class="mb-1" data-prepend="<span class='mif-dollar2'></span>" data-append="<span>0.00</span>" title="">
<script>
var customButtons = [
{
html: "<span class='mif-user'></span>",
cls: "alert",
onclick: "alert('ku from custom button')"
}
]
</script>
<label>Custom button</label>
<input type="text" data-role="input" data-clear-button="false" class="mb-1" data-custom-buttons="customButtons" title="">
</form>
</div>
<pre class=""><code>
<input type="text" data-role="input">
<input type="password" data-role="input">
<input type="text" data-role="input"
data-prepend="<span class='mif-user'></span>">
<input type="text" data-role="input" data-prepend="Email">
<input type="text" data-role="input" data-append="Email">
<input type="text" data-role="input"
class="mb-1"
data-prepend="<span class='mif-dollar2'></span>"
data-append="<span>0.00</span>" title="">
<script>
var customButtons = [
{
html: "<span class='mif-user'></span>",
cls: "alert",
onclick: "alert('ku from custom button')"
}
]
</script>
<input type="text"
data-role="input"
data-clear-button="false"
data-custom-buttons="customButtons">
</code></pre>
<p>
Additional functionality for input is implemented through the plugin <code>input</code>. To activate plugin and additional options add the attribute <code>data-role="input"</code> to element.
</p>
<h4 id="_tag-input">Tag input</h4>
<p class="text-small">New in 4.2.18</p>
<p>
To create tag input, add attribute <code>data-role="taginput"</code> to input field.
Enter tag name and press <kbd>Enter</kbd> or <kbd>,</kbd>
</p>
<div class="example">
<form class="mb-2">
<input type="text" data-role="taginput" class="mb-1" title="">
</form>
</div>
<pre><code class="html">
<form>
<input type="text" data-role="taginput">
</form>
</code></pre>
<div class="example">
<p>Init values</p>
<input type="text" data-role="taginput" class="mt-4" value="css, javascript, html, metro 4">
<p>Specific tags colors</p>
<input type="text" data-role="taginput" class="mt-4" data-cls-tag="bg-cyan fg-white" data-cls-tag-remover="bg-darkCyan fg-white">
<p>Random tag colors</p>
<input type="text" data-role="taginput" class="mt-4" data-random-color="true">
<p>Events</p>
<input type="text" data-role="taginput" class="mt-4" data-on-tag="$('#output').text(this.value)">
<div class="debug p-10 mt-4 text-center" id="output"></div>
</div>
<pre><code>
<p>Init values</p>
<input type="text" data-role="taginput" class="mt-4" value="css, javascript, html, metro 4">
<p>Specific tags colors</p>
<input type="text" data-role="taginput" class="mt-4" data-cls-tag="bg-cyan fg-white" data-cls-tag-remover="bg-darkCyan fg-white">
<p>Random tag colors</p>
<input type="text" data-role="taginput" class="mt-4" data-random-color="true">
<p>Events</p>
<input type="text" data-role="taginput" class="mt-4" data-on-tag="$('#output').text(this.value)">
<div class="debug p-10 mt-4 text-center" id="output"></div>
</code></pre>
<h4 id="_spinner">Spinner</h4>
<p class="text-small">New in 4.2.20</p>
<p>
To create <code>spinner</code>, add attribute <code>data-role="spinner"</code> to input field.
</p>
<div class="example">
<input type="text" data-role="spinner" class="mb-1" title="">
</div>
<pre><code class="html">
<input type="text" data-role="spinner">
</code></pre>
<div class="example">
<p>Min - 0, max - 5</p>
<input type="text" data-role="spinner" data-min-value="0" data-max-value="5">
<p>Step - 0.52, fixed - 2</p>
<input type="text" data-role="spinner" data-step=".52" data-fixed="2">
<p>Buttons left</p>
<input type="text" data-role="spinner" data-buttons-position="left">
<p>Buttons right</p>
<input type="text" data-role="spinner" data-buttons-position="right">
<p>Additional classes</p>
<input type="text" data-role="spinner"
data-cls-spinner-value="text-bold bg-cyan fg-white"
data-cls-spinner-button="info"
data-plus-icon="<span class='mif-plus fg-white'></span>"
data-minus-icon="<span class='mif-minus fg-white'></span>">
</div>
<pre><code>
<p>Min - 0, max - 5</p>
<input type="text" data-role="spinner" data-min-value="0" data-max-value="5">
<p>Step - 0.52, fixed - 2</p>
<input type="text" data-role="spinner" data-step=".52" data-fixed="2">
<p>Buttons left</p>
<input type="text" data-role="spinner" data-buttons-position="left">
<p>Buttons right</p>
<input type="text" data-role="spinner" data-buttons-position="right">
<p>Additional classes</p>
<input type="text" data-role="spinner"
data-cls-spinner-value="text-bold bg-cyan fg-white"
data-cls-spinner-button="info"
data-plus-icon="<span class='mif-plus fg-white'></span>"
data-minus-icon="<span class='mif-minus fg-white'></span>">
</code></pre>
<p>
You can set or get <code>spinner</code> value with method <code>val()</code>.
Also you can set or get value with input attribute <code>value</code>.
To set to default value, you can use attribute <code>data-default-value</code> and method <code>toDefault()</code>.
</p>.
<h4 id="_search">Search</h4>
<p>
You can define <code>input</code> as <code>search-input</code>.
To create search input, enable <code>search-button</code> with attribute <code>data-search-button="true"</code>.
</p>
<div class="example">
<form class="mb-2">
<input type="text" data-role="input" data-search-button="true" class="mb-1" title="">
</form>
</div>
<pre><code class="html">
<form>
<input type="text" data-role="input" data-search-button="true">
</form>
</code></pre>
<p>
The <code>search button</code> will be of the <code>submit</code> type if you specify an attribute <code>data-search-button-click="submit"</code>.
If you set this attribute to other value, you can specify custom event for click event on search button with attribute <code>data-on-search-button-click="..."</code>.
</p>
<h4 id="_select">Select</h4>
<p>
Metro 4 uses a special wrapper to display the drop-down select. When you use Metro 4 select wrapper, you can styling every option with css classes.
Use attribute <code>data-role="select"</code> to activate wrapper.
</p>
<h6 class="mt-4">Single</h6>
<div class="example pb-0">
<form class="mb-2">
<div class="row">
<div class="cell-md-6">
<select data-role="select" title="">
<option class="fg-cyan" value="1">One</option>
<option selected class="text-bold fg-red" value="2">Two</option>
<option class="fg-green" value="3">Three</option>
</select>
</div>
<div class="cell-md-6">
<select data-role="select" title="">
<optgroup label="Physical servers">
<option value="dedicated_corei3_hp">Core i3 (hp)</option>
<option value="dedicated_pentium_hp">Pentium (hp)</option>
<option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option>
<option value="dedicated_smart_pentium_hp">Smart Pentium (hp)</option>
<option value="dedicated_smart_xeon_hp">Smart Xeon (hp)</option>
<option value="dedicated_xeon_hp">Xeon (hp)</option>
<option value="dedicated_xeon">Xeon</option>
<option value="dedicated_xeon_sata">Xeon SATA</option>
<option value="dedicated_dual_xeon">Dual Xeon</option>
<option value="dedicated_dual_xeon_sata">Dual Xeon SATA</option>
<option value="dedicated_smart_xeon">Smart Xeon</option>
<option value="dedicated_smart_xeon_sata">Smart Xeon SATA</option>
<option value="dedicated_smart_dual_xeon">Smart Dual Xeon</option>
<option value="dedicated_smart_dual_xeon_sata">Smart Dual Xeon SATA</option>
<option value="colo_new_2u">Colocation 2U</option>
<option value="colo_new_4u">Colocation 4U</option>
</optgroup>
<optgroup label="Virtual hosting">
<option value="mini">Mini</option>
<option value="site">Site</option>
<option value="portal">Portal</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="evps0">eVPS-TEST (30 дней)</option>
<option value="evps1" selected="selected">eVPS-1</option>
<option value="evps2">eVPS-2</option>
<option value="evps4">eVPS-4</option>
<option value="evps8">eVPS-8</option>
<option value="evps16">eVPS-16</option>
<option value="evps32">eVPS-32</option>
<option value="evps64">eVPS-64</option>
<option value="evps128">eVPS-128</option>
</optgroup>
</select>
</div>
</div>
</form>
</div>
<pre class=""><code>
<select data-role="select">
<option class="fg-cyan">One</option>
<option selected class="text-bold fg-red">Two</option>
<option class="fg-green">Three</option>
</select>
<select data-role="select">
<optgroup label="Virtual hosting">
<option value="mini">Mini</option>
<option value="site">Site</option>
<option value="portal">Portal</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="evps0">eVPS-TEST (30 дней)</option>
<option value="evps1" selected="selected">eVPS-1</option>
<option value="evps2">eVPS-2</option>
<option value="evps4">eVPS-4</option>
<option value="evps8">eVPS-8</option>
<option value="evps16">eVPS-16</option>
<option value="evps32">eVPS-32</option>
<option value="evps64">eVPS-64</option>
<option value="evps128">eVPS-128</option>
</optgroup>
</select>
</code></pre>
<h6 class="mt-4">Multiple</h6>
<p class="text-small">New in 4.2.18</p>
<p>
Metro 4 also support select with <code>multiple</code> option. Each selected option in multiple displayed as tag.
</p>
<div class="example">
<select data-role="select" title="" multiple>
<optgroup label="Physical servers">
<option value="dedicated_corei3_hp">Core i3 (hp)</option>
<option value="dedicated_pentium_hp">Pentium (hp)</option>
<option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option>
<option value="dedicated_smart_pentium_hp">Smart Pentium (hp)</option>
<option value="dedicated_smart_xeon_hp">Smart Xeon (hp)</option>
<option value="dedicated_xeon_hp">Xeon (hp)</option>
<option value="dedicated_xeon">Xeon</option>
<option value="dedicated_xeon_sata">Xeon SATA</option>
<option value="dedicated_dual_xeon">Dual Xeon</option>
<option value="dedicated_dual_xeon_sata">Dual Xeon SATA</option>
<option value="dedicated_smart_xeon">Smart Xeon</option>
<option value="dedicated_smart_xeon_sata">Smart Xeon SATA</option>
<option value="dedicated_smart_dual_xeon">Smart Dual Xeon</option>
<option value="dedicated_smart_dual_xeon_sata">Smart Dual Xeon SATA</option>
<option value="colo_new_2u">Colocation 2U</option>
<option value="colo_new_4u">Colocation 4U</option>
</optgroup>
<optgroup label="Virtual hosting">
<option value="mini">Mini</option>
<option value="site">Site</option>
<option value="portal">Portal</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="evps0">eVPS-TEST (30 дней)</option>
<option value="evps1" selected="selected">eVPS-1</option>
<option value="evps2">eVPS-2</option>
<option value="evps4">eVPS-4</option>
<option value="evps8">eVPS-8</option>
<option value="evps16">eVPS-16</option>
<option value="evps32">eVPS-32</option>
<option value="evps64">eVPS-64</option>
<option value="evps128">eVPS-128</option>
</optgroup>
</select>
</div>
<pre><code>
<select data-role="select" title="" multiple>
<optgroup label="Physical servers">
<option value="dedicated_corei3_hp">Core i3 (hp)</option>
<option value="dedicated_pentium_hp">Pentium (hp)</option>
<option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option>
<option value="dedicated_smart_pentium_hp">Smart Pentium (hp)</option>
<option value="dedicated_smart_xeon_hp">Smart Xeon (hp)</option>
<option value="dedicated_xeon_hp">Xeon (hp)</option>
<option value="dedicated_xeon">Xeon</option>
<option value="dedicated_xeon_sata">Xeon SATA</option>
<option value="dedicated_dual_xeon">Dual Xeon</option>
<option value="dedicated_dual_xeon_sata">Dual Xeon SATA</option>
<option value="dedicated_smart_xeon">Smart Xeon</option>
<option value="dedicated_smart_xeon_sata">Smart Xeon SATA</option>
<option value="dedicated_smart_dual_xeon">Smart Dual Xeon</option>
<option value="dedicated_smart_dual_xeon_sata">Smart Dual Xeon SATA</option>
<option value="colo_new_2u">Colocation 2U</option>
<option value="colo_new_4u">Colocation 4U</option>
</optgroup>
<optgroup label="Virtual hosting">
<option value="mini">Mini</option>
<option value="site">Site</option>
<option value="portal">Portal</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="evps0">eVPS-TEST (30 дней)</option>
<option value="evps1" selected="selected">eVPS-1</option>
<option value="evps2">eVPS-2</option>
<option value="evps4">eVPS-4</option>
<option value="evps8">eVPS-8</option>
<option value="evps16">eVPS-16</option>
<option value="evps32">eVPS-32</option>
<option value="evps64">eVPS-64</option>
<option value="evps128">eVPS-128</option>
</optgroup>
</select>
</code></pre>
<h6 class="mt-4">Option templates</h6>
<p class="text-small">New in 4.2.18</p>
<p>
You can use attribute <code>data-template</code> for option for define html option display.
Example: you need to add <code>icon</code> to option.
<code>$1</code> in template, used for replace by option text.
</p>
<div class="example">
<select data-role="select" title="">
<optgroup label="Physical servers">
<option value="dedicated_corei3_hp" data-template="<span class='mif-server icon'></span> $1">Core i3 (hp)</option>
<option value="dedicated_pentium_hp" data-template="<span class='mif-server icon'></span> $1">Pentium (hp)</option>
<option value="dedicated_smart_corei3_hp" data-template="<span class='mif-server icon'></span> $1">Smart Core i3 (hp)</option>
<option value="dedicated_smart_pentium_hp" data-template="<span class='mif-server icon'></span> $1">Smart Pentium (hp)</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="evps0" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-TEST (30 дней)</option>
<option value="evps1" selected="selected" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-1</option>
<option value="evps2" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-2</option>
<option value="evps4" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-4</option>
</optgroup>
</select>
</div>
<pre><code>
<select data-role="select" title="">
<optgroup label="Physical servers">
<option value="11" data-template="<span class='mif-server icon'></span> $1">Core i3 (hp)</option>
<option value="12" data-template="<span class='mif-server icon'></span> $1">Pentium (hp)</option>
<option value="13" data-template="<span class='mif-server icon'></span> $1">Smart Core i3 (hp)</option>
<option value="14" data-template="<span class='mif-server icon'></span> $1">Smart Pentium (hp)</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="21" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-TEST (30 дней)</option>
<option value="22" selected="selected" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-1</option>
<option value="23" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-2</option>
<option value="24" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-4</option>
</optgroup>
</select>
</code></pre>
<p>
Additional functionality for select is implemented through the plugin <code>select</code>.
To activate plugin and additional options add the attribute <code>data-role="select"</code> to element.
</p>
<p>
In version <code>4.2.0</code>, component receive new feature: <code>filtering</code>.
</p>
<h4>Select in runtime</h4>
<p>
To set or get <code>select</code> value at runtime, use method <code>val()</code>.
Calling a method without a parameter will return the current <code>select</code> value.
Calling a method with a parameter will set value for <code>select</code>.
</p>
<pre><code class="html">
<select data-role="select">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
</code></pre>
<pre><code class="javascript">
function selectChangeValue(){
var new_value = Metro.utils.random(1, 4);
var select = $("select").data('select');
console.log("Current value: " + select.val());
console.log("New value: " + new_value);
select.val(new_value);
console.log("Result value: " + select.val());
}
</code></pre>
<p>
To change select options at runtime, use method <code>data()</code>. You can use <code>PLAIN HTML</code> or <code>JSON OBJECT</code> to update options.
When you execute method <code>data()</code>, options will be replaced in select. For more info see source if <a href="examples/ajax/select.html">this example</a>.
</p>
<div class="row mt-2">
<div class="cell-md-6">
<h6 class="text-light">HTML example</h6>
<pre><code>
<option value="mini">Mini</option>
<option value="site">Site</option>
<option value="portal">Portal</option>
<option value="portal">Corporate</option>
<optgroup label="Virtual servers">
<option value="evps1">eVPS-1</option>
<option value="evps2">eVPS-2</option>
<option value="evps4">eVPS-4</option>
<option value="evps8">eVPS-8</option>
</optgroup>
</code></pre>
</div>
<div class="cell-md-6">
<h6 class="text-light">JSON example</h6>
<pre><code class="json">
{
"1": "Item 1",
"2": "Item 2",
"3": "Item 3",
"Item group": {
"1_1": "Item 1_1",
"2_2": "Item 2_2",
"3_3": "Item 3_3"
}
}
</code></pre>
</div>
</div>
<pre><code>
<select id="select1" data-role="select">...</select>
...
$.get(_url_, function(response){
var select = $('#select1').data('select');
select.data(response);
});
</code></pre>
<h4 id="_textarea">Textarea</h4>
<p>
Metro 4 uses a special wrapper to display the textarea. When you use Metro 4 textarea wrapper, you can enabling <code>autosize</code> feature.
Use attribute <code>data-role="textarea"</code> to activate wrapper.
</p>
<div class="example mb-2">
<form>
<textarea placeholder="Default" class="mb-1"></textarea>
<textarea data-role="textarea" placeholder="Autosize" data-auto-size="true" class="mb-1"></textarea>
<textarea data-role="textarea" placeholder="Autosize" data-auto-size="true" class="mb-1" data-prepend="<span class='mif-bubbles'></span>"></textarea>
<textarea data-role="textarea" placeholder="Disabled" disabled></textarea>
</form>
</div>
<pre class=""><code>
<textarea data-role="textarea"></textarea>
<textarea data-role="textarea" data-auto-size="true" data-max-height="200"></textarea>
<textarea data-role="textarea" disabled></textarea>
</code></pre>
<p>
Additional functionality for textarea is implemented through the plugin <code>textarea</code>. To activate plugin and additional options add the attribute <code>data-role="textarea"</code> to element.
</p>
<h4 id="_checkbox">Checkbox</h4>
<p>
Default checkbox is not styled, but you can add attribute <code>data-role="checkbox"</code> to element to styling.
</p>
<h6>Default checks</h6>
<div class="example">
<input type="checkbox" title="">
<input type="checkbox" checked title="">
<input type="checkbox" disabled title="">
<input type="checkbox" disabled checked title="">
</div>
<h6 class="mt-2">Metro 4 checkboxes</h6>
<div class="example mb-2">
<p class="text-bold">Style 1</p>
<form>
<input type="checkbox" data-role="checkbox" data-caption="Unchecked" title="">
<input type="checkbox" data-role="checkbox" data-caption="Checked" checked title="">
<input type="checkbox" data-role="checkbox" data-caption="Indeterminate" data-indeterminate="true" title="">
<input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled title="">
<input type="checkbox" data-role="checkbox" data-caption="Disabled checked" disabled checked title="">
</form>
<p class="text-bold">Style 2 <span class="text-small">New in 4.2.18</span></p>
<form>
<input type="checkbox" data-role="checkbox" data-caption="Unchecked" title="" data-style="2">
<input type="checkbox" data-role="checkbox" data-caption="Checked" checked title="" data-style="2">
<input type="checkbox" data-role="checkbox" data-caption="Indeterminate" data-indeterminate="true" title="" data-style="2">
<input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled title="" data-style="2">
<input type="checkbox" data-role="checkbox" data-caption="Disabled checked" disabled checked title="" data-style="2">
</form>
</div>
<pre class=""><code>
<input type="checkbox" data-role="checkbox" data-caption="Check">
<input type="checkbox" data-role="checkbox" data-caption="Check" checked>
<input type="checkbox" data-role="checkbox" data-caption="Check" data-indeterminate="true">
<input type="checkbox" data-role="checkbox" data-caption="Check" disabled>
<input type="checkbox" data-role="checkbox" data-caption="Check" disabled checked>
<input type="checkbox" data-role="checkbox" data-caption="Check" data-style="2">
</code></pre>
<p>
Additional functionality for input is implemented through the plugin <code>checkbox</code>.
To activate plugin and additional options add the attribute <code>data-role="checkbox"</code> to element.
</p>
<h4>Indeterminate state</h4>
<p>
In Metro 4, the checkbox can have an indeterminate state. To set this state add or remove attribute <code>data-indeterminate="true"</code> for/from input.
</p>
<div class="example">
<input type="checkbox" data-role="checkbox" data-caption="Indeterminate" data-indeterminate="true" id="indeterminate-checkbox" title="">
<div class="mt-2">
<button class="button" onclick="$('#indeterminate-checkbox').toggleAttr('data-indeterminate', 'true')">Set state</button>
<button class="button" onclick="$('#indeterminate-checkbox').toggleAttr('data-indeterminate', 'false')">Remove state</button>
</div>
</div>
<pre><code>
<input type="checkbox"
data-role="checkbox"
data-caption="Indeterminate"
indeterminate
id="indeterminate-checkbox">
<div class="mt-2">
<button class="button"
onclick="$('#indeterminate-checkbox').toggleAttr('data-indeterminate', 'true')"
>Set state</button>
<button class="button"
onclick="$('#indeterminate-checkbox').toggleAttr('data-indeterminate', 'false')"
>Remove state</button>
</div>
</code></pre>
<p class="remark warning">
Warning! The <code>toggleAttr()</code> is not a native jQuery function. This is a Metro 4 jQuery extension function.
</p>
<h4 id="_radio">Radio</h4>
<p>
Default radio is not styled, but you can add attribute <code>data-role="radio"</code> to element to styling.
</p>
<h6 class="mt-4">Default radio</h6>
<div class="example">
<form>
<input type="radio" name="r1" title="">
<input type="radio" name="r1" checked title="">
<input type="radio" name="r2" disabled title="">
<input type="radio" name="r2" disabled checked title="">
</form>
</div>
<h6 class="mt-2">Styled radio</h6>
<div class="example mb-2">
<p class="text-bold">Style 1</p>
<form>
<input type="radio" data-role="radio" data-caption="Check" name="r1" title="">
<input type="radio" data-role="radio" data-caption="Check" name="r1" checked title="">
<input type="radio" data-role="radio" data-caption="Check" name="r2" disabled title="">
<input type="radio" data-role="radio" data-caption="Check" name="r2" checked disabled title="">
</form>
<p class="text-bold">Style 2 <span class="text-small">New in 4.2.18</span></p>
<form>
<input type="radio" data-role="radio" data-caption="Check" name="r1" title="" data-style="2">
<input type="radio" data-role="radio" data-caption="Check" name="r1" checked title="" data-style="2">
<input type="radio" data-role="radio" data-caption="Check" name="r2" disabled title="" data-style="2">
<input type="radio" data-role="radio" data-caption="Check" name="r2" checked disabled title="" data-style="2">
</form>
</div>
<pre class=""><code>
<input type="radio" data-role="radio" data-caption="Check" name="r1">
<input type="radio" data-role="radio" data-caption="Check" name="r1" checked>
<input type="radio" data-role="radio" data-caption="Check" name="r2" disabled>
<input type="radio" data-role="radio" data-caption="Check" name="r2" checked disabled>
<input type="radio" data-role="radio" data-caption="Check" name="r1" data-style="2">
</code></pre>
<p>
Additional functionality for input is implemented through the plugin <code>radio</code>.
To activate plugin and additional options add the attribute <code>data-role="radio"</code> to element.
</p>
<h4 id="_switch">Switch</h4>
<p>
Metro 4 support additional styling for checkbox. Use attribute <code>data-role="switch"</code> to create checkbox styling as <code>switch</code>.
</p>
<div class="example">
<form>
<input type="checkbox" data-role="switch" data-caption="Check" title="">
<input type="checkbox" data-role="switch" data-caption="Check" checked title="">
<input type="checkbox" data-role="switch" data-caption="Check" disabled title="">
<input type="checkbox" data-role="switch" data-caption="Check" disabled checked title="">
</form>
</div>
<pre class=""><code>
<input type="checkbox" data-role="switch" data-caption="Check">
<input type="checkbox" data-role="switch" data-caption="Check" checked>
<input type="checkbox" data-role="switch" data-caption="Check" disabled>
<input type="checkbox" data-role="switch" data-caption="Check" disabled checked>
</code></pre>
<p>
Additional functionality for input is implemented through the plugin <code>switch</code>.
To activate plugin and additional options add the attribute <code>data-role="switch"</code> to element.
</p>
<h4 id="_file">File browser</h4>
<div class="example">
<form class="">
<input type="file" data-role="file" class="mb-1" multiple data-button-title="Choose files">
<input type="file" data-role="file" class="mb-1" data-prepend="Select your photo: " data-button-title="Choose photo">
<input type="file" data-role="file" data-button-title="<span class='mif-folder'></span>">
</form>
</div>
<pre class=""><code>
<input type="file" data-role="file">
<input type="file" data-role="file" data-button-title="Choose file">
<input type="file" data-role="file" data-button-title="<span class='mif-folder'></span>">
</code></pre>
<p>
Additional functionality for input is implemented through the plugin <code>file</code>.
To activate plugin and additional options add the attribute <code>data-role="file"</code> to element.
</p>
<h4 id="_form_buttons">Form buttons</h4>
<div class="example">
<form class="">
<input type="button" class="button" value="Button">
<input type="reset" class="button" value="Reset">
<input type="submit" class="button" value="Submit">
</form>
</div>
<pre class=""><code>
<input type="button" class="button" value="Button">
<input type="reset" class="button" value="Reset">
<input type="submit" class="button" value="Submit">
</code></pre>
<!-- ads-html -->
<h3 id="_layout">Layout</h3>
<p>
Since Metro 4 applies <code>display: block</code> and <code>width: 100%</code> to almost all our form controls, forms will by default stack vertically.
Additional classes can be used to vary this layout on a per-form basis.
</p>
<h4 id="_form_groups">Form groups</h4>
<p>
The <code>.form-group</code> class is the easiest way to add some structure to forms.
Its only purpose is to provide margin-bottom around a label and control pairing.
As a bonus, since it’s a class you can use it with <code><fieldset></code>, <code><div></code>, or nearly any other element.
</p>
<div class="example">
<form>
<div class="form-group">
<label>Example label</label>
<input type="text" title="">
</div>
<div class="form-group">
<label>Example label</label>
<input type="text" title="">
</div>
</form>
</div>
<pre class=""><code>
<form>
<div class="form-group">
<label>Example label</label>
<input type="text">
</div>
<div class="form-group">
<label>Example label</label>
<input type="text">
</div>
</form>
</code></pre>
<h4 id="_grid_layout">Grid layout</h4>
<p>
More complex forms can be built using our grid classes.
Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
</p>
<div class="example">
<form>
<div class="row">
<div class="cell-md-6">
<input type="text" placeholder="First name">
</div>
<div class="cell-md-6">
<input type="text" placeholder="Last name">
</div>
</div>
</form>
</div>
<pre class=""><code>
<form>
<div class="row">
<div class="cell-md-6">
<input type="text" placeholder="First name">
</div>
<div class="cell-md-6">
<input type="text" placeholder="Last name">
</div>
</div>
</form>
</code></pre>
<h4 id="_horizontal_form">Horizontal form</h4>
<p>
Create horizontal forms with the grid by adding the <code>.row</code> class to form groups and using the <code>.cell-*-*</code> classes to specify the width of your labels and controls.
</p>
<div class="example">
<form>
<div class="row mb-2">
<label class="cell-sm-2">Email</label>
<div class="cell-sm-10">
<input type="email" title="">
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-2">Password</label>
<div class="cell-sm-10">
<input type="password" title="">
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-2">Radios</label>
<div class="cell-sm-10">
<input name="horizontal_form_r1" type="radio" data-role="radio" data-caption="Option one" checked title="">
<input name="horizontal_form_r1" type="radio" data-role="radio" data-caption="Option two" title="">
<input name="horizontal_form_r1" type="radio" data-role="radio" data-caption="Option three is disabled" disabled title="">
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-2">Checkbox</label>
<div class="cell-sm-10">
<input name="horizontal_form_c1" type="checkbox" data-role="checkbox" data-caption="Check me out" checked title="">
</div>
</div>
<div class="row">
<div class="cell">
<button type="submit" class="button primary">Sign in</button>
</div>
</div>
</form>
</div>
<pre class=""><code>
<form>
<div class="row mb-2">
<label class="cell-sm-2">Email</label>
<div class="cell-sm-10">
<input type="email">
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-2">Password</label>
<div class="cell-sm-10">
<input type="password">
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-2">Radios</label>
<div class="cell-sm-10">
<input name="horizontal_form_r1" type="radio"
data-role="radio" data-caption="Option one" checked>
<input name="horizontal_form_r1" type="radio"
data-role="radio" data-caption="Option two">
<input name="horizontal_form_r1" type="radio"
data-role="radio" data-caption="Option three is disabled" disabled>
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-2">Checkbox</label>
<div class="cell-sm-10">
<input name="horizontal_form_c1" type="checkbox"
data-role="checkbox" data-caption="Check me out" checked>
</div>
</div>
<div class="row">
<div class="cell">
<button type="submit" class="button primary">Sign in</button>
</div>
</div>
</form>
</code></pre>
<h4 id="_inline_form">Inline form</h4>
<p>
Use the <code>.inline-form</code> class to display a series of labels, form controls, and buttons on a single horizontal row.
Form controls within inline forms vary slightly from their default states.
</p>
<div class="example">
<form class="inline-form">
<input type="text" placeholder="Your Name" title="">
<input type="text" placeholder="Username" title="">
<input type="checkbox" data-role="checkbox" data-caption="Remember me" title="">
<button class="button success">Submit</button>
</form>
</div>
<pre class=""><code>
<form class="inline-form">
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Username">
<input type="checkbox" data-role="checkbox" data-caption="Remember me">
<button class="button success">Submit</button>
</form>
</code></pre>
<h3 id="_accent_colors">Accent colors</h3>
<p>
You can add accent colors to form elements such as <code><input></code>, <code><select></code> and <code><textarea></code>.
You can use next classes:
<code>.primary</code>,
<code>.secondary</code>,
<code>.success</code>,
<code>.alert</code>,
<code>.warning</code>,
<code>.yellow</code>,
<code>.info</code>,
<code>.dark</code>.
</p>
<div class="example">
<form>
<input type="text" class="alert mb-1" title="">
<input type="password" class="success mb-1" data-role="input" title="">
<textarea data-role="textarea" class="primary mb-1" title=""></textarea>
<select class="warning" data-role="select" title="">
<option class="fg-cyan">One</option>
<option class="text-bold fg-red">Two</option>
<option selected class="fg-green">Three</option>
</select>
</form>
</div>
<pre class=""><code>
<input type="text" class="alert">
<input type="password" class="success" data-role="input">
<textarea data-role="textarea" class="primary"></textarea>
<select class="warning" data-role="select">
<option class="fg-cyan">One</option>
<option class="text-bold fg-red">Two</option>
<option selected class="fg-green">Three</option>
</select>
</code></pre>
<h3 id="_disabled_forms">Disabled forms</h3>
<p>
To disable form elements add the <code>disabled</code> boolean attribute to element.
</p>
<div class="example">
<form>
<input type="text" data-role="input" disabled class="mb-1" title="">
<input type="file" data-role="file" disabled class="mb-1" title="">
<textarea data-role="textarea" disabled class="mb-1" title=""></textarea>
<select data-role="select" disabled title="">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</form>
</div>
<pre class=""><code>
<form>
<input type="text" data-role="input" disabled class="mb-1">
<input type="file" data-role="file" disabled class="mb-1">
<textarea data-role="textarea" disabled class="mb-1"></textarea>
<select data-role="select" disabled>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</form>
</code></pre>
<p>
To disable elements at runtime:
</p>
<div class="example">
<input type="text" data-role="input" id="disable_input_runtime" title="">
<div class="d-flex flex-justify-around mt-2">
<span>Disable input</span>
<input type="checkbox" data-role="switch" checked onclick="toggleInputState(this)" title="">
<span>Enable input</span>
</div>
<script>
function toggleInputState(el){
var i = $('#disable_input_runtime');
$(el).is(':checked') ? i.attr('disabled', false) : i.attr('disabled', true);
}
</script>
</div>
<pre class=" lang-js"><code>
<input type="text" data-role="input" id="disable_input_runtime">
<input type="checkbox" data-role="switch" checked onclick="toggleInputState(this)">
<script>
function toggleInputState(el){
var i = $('#disable_enable_input_runtime');
$(el).is(':checked') ? i.attr('disabled', false) : i.attr('disabled', true);
}
</script>
</code></pre>
<!-- ads-html -->
<h3 id="_validation">Validation form</h3>
<p>
If you use default form elements (without defining <code>data-role</code>), you can provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers.
Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
</p>
<p class="remark warning">
We <strong>highly recommended</strong> <a href="validator.html">Metro 4 Validator</a> plugin or other third-party plugins for validating form.
</p>
<h4 id="_validation_how">How it works</h4>
<p>
Here’s how default form validation works with Metro 4:
</p>
<ul>
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code>:invalid</code> and <code>:valid</code>. It applies to <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</li>
<li>Add <code>.custom-validation</code> class to form</li>
<li>Add <code>require</code> attribute to element</li>
<li>To invalid feedback add text element after input (select, textarea) with class <code>.invalid-feedback</code></li>
<li>Add <code>novalidate</code> attribute to form</li>
</ul>
<div class="example">
<form class="custom-validation need-validation" novalidate>
<div class="row mb-3">
<div class="cell-md-6">
<label>First name</label>
<input type="text" required value="Billy" title="">
</div>
<div class="cell-md-6">
<label>Last name</label>
<input type="text" required value="Gates" title="">
</div>
</div>
<div class="row mb-2">
<div class="cell-md-6">
<label>City</label>
<input type="text" required placeholder="City" title="">
<div class="invalid_feedback">Please provide a valid city.</div>
</div>
<div class="cell-md-3">
<label>State</label>
<input type="text" required placeholder="State" title="">
<div class="invalid_feedback">Please provide a valid state.</div>
</div>
<div class="cell-md-3">
<label>Zip</label>
<input type="text" required placeholder="Zip" title="">
<div class="invalid_feedback">Please provide a valid zip.</div>
</div>
</div>
<button class="button primary">Submit form</button>
</form>
</div>
<h4 id="_validation_browser">Browser defaults</h4>
<p>
Not interested in custom validation feedback messages or writing JavaScript to change form behaviors?
All good, you can use the browser defaults. Try submitting the form below.
Depending on your browser and OS, you’ll see a slightly different style of feedback.
</p>
<p>
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
</p>
<div class="example">
<form class="need-validation">
<div class="row mb-3">
<div class="cell-md-6">
<label>First name</label>
<input type="text" required value="Billy" title="">
</div>
<div class="cell-md-6">
<label>Last name</label>
<input type="text" required value="Gates" title="">
</div>
</div>
<div class="row mb-2">
<div class="cell-md-6">
<label>City</label>
<input type="text" required placeholder="City">
</div>
<div class="cell-md-3">
<label>State</label>
<input type="text" required placeholder="State">
</div>
<div class="cell-md-3">
<label>Zip</label>
<input type="text" required placeholder="Zip">
</div>
</div>
<button class="button primary">Submit form</button>
</form>
</div>
<h4 id="_validation_plugin" class="fg-red">Use the power, Luke!</h4>
<p>
To better support form validation, use the plugin <a href="validator.html">Metro 4 Validator</a>.
This plugin provides more functionality to validating form with special validation funcs include custom functions and patterns.
</p>
<div class="example">
<form data-role="validator" action="javascript:">
<label>Label for input</label>
<input type="text" data-role="input" data-validate="required" title="">
<button class="button primary mt-2">Submit</button>
</form>
</div>
<h3 id="_forms_rtl">Rtl support</h3>
<p>
Metro supports rtl input method. To set Metro's rtl you can add <code>metro-rtl.css</code> to page head and add attribute <code>dir</code> with <code>rtl</code> value to element.
</p>
<h4>Inputs</h4>
<div class="example">
<form class="mb-2">
<input type="text" dir="rtl" class="mb-1" title="">
<input type="text" dir="rtl" data-role="input" data-clear-button="true" class="mb-1" title="">
<input type="text" dir="rtl" data-role="input" data-clear-button="true" data-prepend="<span class='mif-user'></span>" title="">
</form>
</div>
<pre class=""><code>
<input type="text" dir="rtl">
<input type="text" dir="rtl" data-role="input" data-clear-button="true">
</code></pre>
<h4>File browser</h4>
<div class="example">
<form class="mb-2">
<input type="file" dir="rtl" data-role="file" class="mb-1">
</form>
</div>
<pre class=""><code>
<input type="file" dir="rtl" data-role="file">
</code></pre>
<h4>Textarea</h4>
<div class="example">
<form class="mb-2">
<textarea dir="rtl" class="mb-1" title=""></textarea>
<textarea data-role="textarea" dir="rtl" class="mb-1" title=""></textarea>
<textarea data-role="textarea" dir="rtl" data-prepend="<span class='mif-bookmark'></span>" title=""></textarea>
</form>
</div>
<pre class=""><code>
<textarea dir="rtl"></textarea>
<textarea data-role="textarea" dir="rtl"></textarea>
</code></pre>
<h4>Select</h4>
<div class="example">
<select data-role="select" dir="rtl" title="">
<option class="fg-cyan" value="1">One</option>
<option selected class="text-bold fg-red" value="2">Two</option>
<option class="fg-green" value="3">Three</option>
</select>
<select data-role="select" dir="rtl" data-prepend="<span class='mif-apps'></span>" title="">
<option class="fg-cyan" value="1">One</option>
<option selected class="text-bold fg-red" value="2">Two</option>
<option class="fg-green" value="3">Three</option>
</select>
</div>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>