×
Namespaces

Variants
Actions
Revision as of 12:17, 24 June 2011 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Mobile web template form improvement

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s):  
Compatibility
Platform(s):  
Article
Keywords: Browsing, Mobile Web Templates
Created: aleksi.hanninen (17 Dec 2009)
Last edited: hamishwillee (24 Jun 2011)

Overview

This code snippet demonstrates how to improve the form components of Nokia High-End Mobile Web Templates. This is done by using additional CSS file where style definitions are.
Mobile web templates form improvement N900 before after.png

You can download the component library from Nokia Developer.

Source: Relevant HTML components

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Forms | Nokia High-End Mobile Web Templates | Code snippets</title>
<link href="resources/styles/reset.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/baseStyles.css" rel="stylesheet" type="text/css" />
<link href="styles/formstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/scripts/templates.js" ></script>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="content">
<h3>Login</h3>
<div class="box-flat">
<form id="form1" method="post" action="">
<fieldset>
<legend>
Legend
</legend>
<label>
Label/Text
</label>
<input type="text" value="" />
<label>
Label/Password
</label>
<input type="password" value="" />
<ul>
<li>
<input id="check-b" type="checkbox" name="check-b" value="true"/>
<label for="check-b">
Remember me
</label>
</li>
</ul>
<select name="menu">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="button-submit-outer">
<div class="button-submit-inner">
<button value="submit" class="button-submit-button">
Submit
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div> <!-- content -->
</div><!-- wrap -->
</body>
</html>


Notice that instead of using the default submit button of the templates, i.e.,

<button class="button-submit" value="submit">
<span>Submit</span>
</button>,

we made our own style definitions, to obtain a submit button which works also in the Gecko-based web browser of N900.

Source: CSS

/* Copy-paste the CSS definitions of normal text input field to password fields also. */
 
input[type='password'] {
border: 1px solid #D8D8D8;
background: #FFF url(../resources/images/img-form-input-shadow.png) repeat-x top;
display: block;
padding: 0.2em;
width: 98%;
color: #333333;
margin-bottom: 1em;
}
 
 
/*
* Template button-submit class styling is working with Nokia devices and Android, but not with
* all mobile devices like iPhone, thus we need to make the style definitions. This is not needed,
* if the html is used only in Nokia devices
*
* These are mostly copy-pasted from the original .button-submit and .button-submit span definitions.
*
**/

 
.button-submit-outer {
/*padding:0 1.5em 0 0;*/
margin-top: 0.4em;
margin-bottom: 0.4em;
display: inline-block;
cursor:pointer;
}
 
.button-submit-inner {
border:0;
color: #333333;
/*padding:0 0 0 1.5em;*/
text-align:center;
}
 
.button-submit-button {
border:0;
cursor:pointer;
height:40px;
line-height:40px;
padding: 0 1.5em;
margin: 0;
background: none;
font-size:100%;
font-weight:normal;
}
 
.button-submit-outer {
background: url(../resources/images/sprite-button-rounded-right.png) no-repeat right top;
height:40px;
line-height:40px;
}
.button-submit-inner {
height:40px;
line-height:40px;
background:url(../resources/images/sprite-button-rounded-left.png) no-repeat left top;
}
.button-submit-outer:hover {
background:url(../resources/images/sprite-button-rounded-right.png) no-repeat right bottom;
color:#fff;
}
.button-submit-outer:hover .button-submit-inner {
background:url(../resources/images/sprite-button-rounded-left.png) no-repeat left bottom;
color:#fff;
}
 
/*
* SELECT ELEMENT
*
* The select element also needs some margins, like the other form elements have.
*
**/

 
select {
margin-bottom: 1em;
}


Postconditions

See also

Supplementary material

This code snippet is part of a web page stub, which can be downloaded at File:Web templates form improvement stub page.zip.

This page was last modified on 24 June 2011, at 12:17.
62 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×