# Creating HTML controls

You can use the following standard HTML controls:

- Push buttons—Perform functions as specified by JavaScript that you associate with the button `onclick` event.

- Check boxes—Allow users to select options by turning them on and off.

- Radio buttons—Allow users to select options by turning them on and off. Only one radio button can be turned on at a time.

- Menus—Offer users options to choose from.

- Text fields—Allow users to input text. For more information, see Handling text input.

- Hidden controls—Allow you to submit values with a form and to store information between client/server exchanges that would otherwise be lost because HTTP connections are stateless.

- Object controls—Allow you to submit associated values with other controls.

The HTML elements are mapped to standard S60 components on mobile devices. You can use a cascading style sheet (CSS) to define the appearance of the controls.

### To use HTML controls

1. Use the HTML `input` element to create screen controls, such as text fields, check boxes, and buttons.

       <div class="login_container">
       	<table cellspacing="0">
       		<tr>
       			<th>Login</th>
       		</tr>
       		<tr>
       			<td>Please login using you Twitter credentials...</td>
       		</tr>
       		<tr>
       			<td class="table_subtitle">Username</td>
       		</tr>
       		<tr>
       			<td class="input_container">
       				<input id="login_username" type="text">
       			</td>
       		</tr>
       		<tr>
       			<td class="table_subtitle">Password</td>
       		</tr>
       		<tr>
       			<td class="input_container">
       				<input id="login_password" type="password">
       			</td>
       		</tr>
       		<tr>
       			<td>
       				<input id="login_remember_me" type="checkbox"><label for="login_remember_me">Remember Me</label>
       			</td>
       		</tr>
       		<tr>
       			<td class="button_container"><a id="login_button" href="#" class="button">Login</a></td>
       		</tr>
       	</table>
       </div>

   Figure: STEW Login view

2. Create JavaScript to implement the functionality of the controls:

       function LoginScreen() {
       	// Get the login button element and assign an 'onclick' event to it.
       	var self = this;
       	var loginButton = document.getElementById( "login_button" );
       	loginButton.onclick = function() {
       		 self.onLoginClicked();
       	};

       	// Get all the UI elements that we can interact with.
       	this.tbUsername = document.getElementById( "login_username" );
       	this.tbPassword = document.getElementById( "login_password" );
       	this.cbRememberMe = document.getElementById( "login_remember_me" );
       }

       LoginScreen.prototype.onLoginClicked = function() {
       	var username = this.tbUsername.value;
       	var password = this.tbPassword.value;
       	var rememberMe = this.cbRememberMe.checked;

       	// Save the data to the storage if the user checked "Remember Me".
       	widget.setPreferenceForKey( rememberMe.toString(), LoginScreen.KEY_REMEMBER_ME );
       	// If "Remember Me" is unchecked, the username and password are cleared because
       	// default values for username and password values are null.
       	widget.setPreferenceForKey( rememberMe ? username : null, LoginScreen.KEY_USERNAME );
       	// REMEMBER: Never store passwords uncoded. See encryption algorithms on
       	// how to encode the password before saving it.
       	widget.setPreferenceForKey( rememberMe ? password : null, LoginScreen.KEY_PASSWORD );

       	// Remember the username and password.
       	twitterService.setCredentials( username, password );

       	// Check which page is the startup page.
       	var startupPage = widget.preferenceForKey( SettingsScreen.KEY_STARTUP_PAGE );
       	if ( startupPage == SettingsScreen.SEARCH_PAGE ) {
       		widgetMenu.activate( Menu.SEARCH_SCREEN );
       	} else {
       		widgetMenu.activate( Menu.UPDATE_STATUS_SCREEN );
       	}
       }