framework7.angular

.page(data-page="form-elements") .navbar .navbar-inner .left a(href="forms.html").back.link.icon-only i.icon.icon-back .center Form Elements .right a(href="#").link.open-panel.icon-only i.icon.icon-bars .page-content .content-block-title Full Layout .list-block.inputs-list ul li .item-content .item-media i.icon.icon-form-name .item-inner .item-title.label Name .item-input input(type="text", placeholder="Your name") li .item-content .item-media i.icon.icon-form-email .item-inner .item-title.label E-mail .item-input input(type="email", placeholder="E-mail") li .item-content .item-media i.icon.icon-form-url .item-inner .item-title.label URL .item-input input(type="url", placeholder="URL") li .item-content .item-media i.icon.icon-form-password .item-inner .item-title.label Password .item-input input(type="password", placeholder="Password") li .item-content .item-media i.icon.icon-form-tel .item-inner .item-title.label Phone .item-input input(type="tel", placeholder="Phone") li .item-content .item-media i.icon.icon-form-gender .item-inner .item-title.label Gender .item-input select option Male option Female li .item-content .item-media i.icon.icon-form-calendar .item-inner .item-title.label Birth date .item-input input(type="date", placeholder="Birth day", value="2014-04-30") li .item-content .item-media i.icon.icon-form-calendar .item-inner .item-title.label Date time .item-input input(type="datetime-local", placeholder="Birth day") li .item-content .item-media i.icon.icon-form-toggle .item-inner .item-title.label Switch .item-input label.label-switch input(type="checkbox") .checkbox li .item-content .item-media i.icon.icon-form-settings .item-inner .item-title.label Slider .item-input .range-slider input(type="range", min="0", max="100", value="50", step="0.1") li.align-top .item-content .item-media i.icon.icon-form-comment .item-inner .item-title.label Resizeable Textarea .item-input textarea.resizable .content-block-title With Floating Labels .list-block.inputs-list ul li .item-content .item-media i.icon.icon-form-name .item-inner .item-title.floating-label Your name .item-input input(type="text", placeholder="") li .item-content .item-media i.icon.icon-form-email .item-inner .item-title.floating-label E-mail .item-input input(type="email", placeholder="") li .item-content .item-media i.icon.icon-form-url .item-inner .item-title.floating-label URL .item-input input(type="url", placeholder="") li .item-content .item-media i.icon.icon-form-password .item-inner .item-title.floating-label Password .item-input input(type="password", placeholder="") li .item-content .item-media i.icon.icon-form-tel .item-inner .item-title.floating-label Phone .item-input input(type="tel", placeholder="") li .item-content .item-media i.icon.icon-form-gender .item-inner .item-title.floating-label Gender .item-input select option option Male option Female li.align-top .item-content .item-media i.icon.icon-form-comment .item-inner .item-title.floating-label Resizeable Textarea .item-input textarea.resizable .content-block-title Icons and inputs .list-block.inputs-list ul li .item-content .item-media i.icon.icon-form-name .item-inner .item-input input(type="text", placeholder="Your name") li .item-content .item-media i.icon.icon-form-email .item-inner .item-input input(type="email", placeholder="E-mail") li .item-content .item-media i.icon.icon-form-gender .item-inner .item-input select option Male option Female li .item-content .item-media i.icon.icon-form-calendar .item-inner .item-input input(type="date", placeholder="Birth day", value="2014-04-30") li .item-content .item-media i.icon.icon-form-toggle .item-inner .item-input label.label-switch input(type="checkbox") .checkbox .content-block-title Labels and inputs .list-block.inputs-list ul li .item-content .item-inner .item-title.label Name .item-input input(type="text", placeholder="Your name") li .item-content .item-inner .item-title.label E-mail .item-input input(type="email", placeholder="E-mail") li .item-content .item-inner .item-title.label Gender .item-input select option Male option Female li .item-content .item-inner .item-title.label Birth date .item-input input(type="date", placeholder="Birth day", value="2014-04-30") li .item-content .item-inner .item-title.label Switch .item-input label.label-switch input(type="checkbox") .checkbox .content-block-title Just inputs .list-block.inputs-list ul li .item-content .item-inner .item-input input(type="text", placeholder="Your name") li .item-content .item-inner .item-input input(type="email", placeholder="E-mail") li .item-content .item-inner .item-input select option Male option Female li .item-content .item-inner .item-input input(type="date", placeholder="Birth day", value="2014-04-30") .content-block-title Inset, just inputs .list-block.inset.inputs-list ul ul li .item-content .item-inner .item-input input(type="text", placeholder="Your name") li .item-content .item-inner .item-input input(type="email", placeholder="E-mail") li .item-content .item-inner .item-input select option Male option Female li .item-content .item-inner .item-input input(type="date", placeholder="Birth day", value="2014-04-30")