More iOS friendly form elements

Issue #465

- converted email fields throughout the site to be of type email
- converted the user website field to be of type url
- removed the browser validation by setting novalidate on the form, not the element
This commit is contained in:
Hannah Wolfe 2013-08-20 20:24:20 +01:00
parent da0416ff16
commit 6bb5fdd757
4 changed files with 13 additions and 13 deletions

View File

@ -1,6 +1,6 @@
<form id="login" method="post">
<form id="login" method="post" novalidate="novalidate">
<div class="email-wrap">
<input class="email" type="email" autocapitalize="off" autocorrect="off" placeholder="Email Address" name="email" novalidate>
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
</div>
<div class="password-wrap">
<input class="password" type="password" placeholder="Password" name="password">

View File

@ -5,18 +5,18 @@
</section>
</header>
<section class="content">
<form id="settings-general">
<form id="settings-general" novalidate="novalidate">
<fieldset>
<div class="form-group">
<label><strong>Blog Title</strong></label>
<input id="blog-title" name="general[title]" type="text" value="{{title}}" />
<input id="blog-title" name="general[title]" type="text" value="{{title}}">
<p>How your blog name appears on the site</p>
</div>
<div class="form-group">
<label><strong>Blog Logo</strong></label>
<section class="js-drop-zone">
<img id="logo" class="js-upload-target" src="{{logo}}"{{#unless logo}} style="display: none"{{/unless}} alt="logo"/>
<img id="logo" class="js-upload-target" src="{{logo}}"{{#unless logo}} style="display: none"{{/unless}} alt="logo">
<input data-url="upload" class="js-fileupload" type="file" name="uploadimage">
</section>
<p>Display a logo on your site in place of blog title</p>
@ -25,7 +25,7 @@
<div class="form-group">
<label><strong>Blog Icon</strong></label>
<section class="js-drop-zone">
<img id="icon" class="js-upload-target" src="{{icon}}"{{#unless icon}} style="display: none"{{/unless}} style="display: none" alt="icon"/>
<img id="icon" class="js-upload-target" src="{{icon}}"{{#unless icon}} style="display: none"{{/unless}} style="display: none" alt="icon">
<input data-url="upload" class="js-fileupload" type="file" name="uploadimage">
</section>
<p>The icon for your blog, used in your browser tab and elsewhere</p>
@ -33,10 +33,10 @@
<div class="form-group">
<label for="email-address"><strong>Email Address</strong></label>
<input id="email-address" name="general[email-address]" type="text" value="{{email}}" />
<input id="email-address" name="general[email-address]" type="email" value="{{email}}">
<p>Address to use for <a href="#">admin notifications</a></p>
<label class="checkbox">
<input type="checkbox" value="1" name="general[public-email]" /> Show my email address on my public profile
<input type="checkbox" value="1" name="general[public-email]"> Show my email address on my public profile
</label>
</div>

View File

@ -11,21 +11,21 @@
<button class="button-change-cover">Change Cover</button>
</figure>
</header>
<form class="user-details-container">
<form class="user-details-container" novalidate="novalidate">
<fieldset class="user-details-top">
<figure class="user-avatar-image">
<img id="user-profile-picture" src="{{#if profile_picture}}{{profile_picture}}{{else}}/shared/img/default-user-profile-picture.jpg{{/if}}" title="{{full_name}}"/>
<button class="button-change-avatar">Update Avatar</button>
</figure>
<label>
<input type="text" value="{{full_name}}" id="user-name" placeholder="Joe Bloggs">
<input type="url" value="{{full_name}}" id="user-name" placeholder="Joe Bloggs" autocapitalize="off" autocorrect="off">
<p>Use your real name so people can recognise you.</p>
</label>
</fieldset>
<fieldset class="user-details-bottom">
<div class="form-group">
<label><strong>Email</strong></label>
<input type="text" value="{{email_address}}" id="user-email">
<input type="email" value="{{email_address}}" id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off">
<p>Email will not be publicly displayed. <a class="highlight" href="#" >Learn more</a>.</p>
</div>

View File

@ -1,6 +1,6 @@
<form id="register" method="post">
<form id="register" method="post" novalidate="novalidate">
<div class="email-wrap">
<input class="email" type="text" placeholder="Email Address" name="email">
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
</div>
<div class="password-wrap">
<input class="password" type="password" placeholder="Password" name="password">