Run
Online Code Editor
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> <title>Full Layout</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> </head> <body> <div class = "views"> <div class = "view view-main"> <div class = "pages"> <div data-page = "home" class = "page navbar-fixed"> <div class = "navbar"> <div class = "navbar-inner"> <div class = "left"> </div> <div class = "center">Form Elements</div> <div class = "right"> </div> </div> </div> <div class = "page-content"> <div class = "content-block-title">Full Layout</div> <div class = "list-block"> <ul> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title label">Name</div> <div class = "item-input"> <input type = "text" placeholder = "Enter your name"> </div> </div> </div> </li> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-email"></i></div> <div class = "item-inner"> <div class = "item-title label">E-mail</div> <div class = "item-input"> <input type = "email" placeholder = "Enter your e-mail"> </div> </div> </div> </li> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-password"></i></div> <div class = "item-inner"> <div class = "item-title label">Password</div> <div class = "item-input"> <input type = "password" placeholder = "Enter your password"> </div> </div> </div> </li> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-tel"></i></div> <div class = "item-inner"> <div class = "item-title label">Phone</div> <div class = "item-input"> <input type = "tel" placeholder = "Enter your phone number"> </div> </div> </div> </li> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-gender"></i></div> <div class = "item-inner"> <div class = "item-title label">Gender</div> <div class = "item-input"> <select> <option>Male</option> <option>Female</option> </select> </div> </div> </div> </li> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-calendar"></i></div> <div class = "item-inner"> <div class = "item-title label">Birth date</div> <div class = "item-input"> <input type = "date" placeholder = "Birth day" value = "2014-04-30"> </div> </div> </div> </li> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-calendar"></i></div> <div class = "item-inner"> <div class = "item-title label">Date time</div> <div class = "item-input"> <input type = "datetime-local"> </div> </div> </div> </li> <li> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-toggle"></i></div> <div class = "item-inner"> <div class = "item-title label">Switch</div> <div class = "item-input"> <label class = "label-switch"> <input type = "checkbox"> <div class = "checkbox"></div> </label> </div> </div> </div> </li> <li class = "align-top"> <div class = "item-content"> <div class = "item-media"><i class = "icon icon-form-comment"></i></div> <div class = "item-inner"> <div class = "item-title label">Textarea</div> <div class = "item-input"> <textarea>
Resizable