Styling input fields
Where are we?
You know how to show an input field, and get data from the user. Let’s improve the way things look.
This page’s goals
By the end of this page, you should:
- Know how to change the look of a text field.
- Know how to change the look of a button.
A plain page
Please try this page. Here’s the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Favorite Game</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#game_in").focus();
$("#go").click(function() {
var user_game = $("#game_in").val();
$("#game_out").text(user_game);
});
});
</script>
</head>
<body>
<h1>Favorite Game</h1>
<p>Please enter the name of your favorite game
(e.g., fetch, frisbee, chewing shoes). Then click the button.</p>
<p>Game:
<input type="text" id="game_in">
<button type="button" id="go">Go</button>
</p>
<p>Favorite game: <span id="game_out"></span></p>
</body>
</html>
Figure 1. Starting the game
The page is quite plain:
Figure 2. Plain page
Styling
Let’s add some styling to create this:
Figure 3. Styled page
You can try the page. Here’s the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Favorite Game</title>
<link type="text/css" rel="stylesheet" href="game2.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#game_in").focus();
$("#go").click(function() {
var user_game = $("#game_in").val();
$("#game_out").text(user_game);
});
});
</script>
</head>
<body>
<h1>Favorite Game</h1>
<p>Please enter the name of your favorite game
(e.g., fetch, frisbee, chewing shoes). Then click the button.</p>
<p>Game:
<input type="text" id="game_in" size="20">
<button type="button" id="go">Go</button>
</p>
<p>Favorite game: <span id="game_out"></span></p>
</body>
</html>
Figure 4. Styled page code
Line 23 uses the size attribute to set the width of the input field to 20 characters.
Including an external style sheet
But where are the styles? The background colors, the font changes, and such? There is no <style> tag in the file.
With JS, we saw that you can put your JS code in a separate file, and include it on your page. You can do the same thing with CSS: put the CSS rules in a separate file, and include them.
Look at line 6. This includes the CSS file game2.css. Here’s the file:
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
background-color: #FFFFF0;
}
h1 {
font-size: 28px;
font-weight: bold;
}
input {
background-color: #FFFF80;
}
button {
font-weight: bold;
background-color: #006600;
color: #FFFF40;
}
Figure 5. CSS file
The advantage is that you can reuse the same CSS across many HTML pages. Have one copy of the CSS file, and include it in all of the pages. Then, if you want to change, say, the background color of all of the HTML pages, change the one CSS file. Every HTML page that refers to the CSS looks different. W00f!
There’s nothing new in the CSS rules themselves. Just the usual fonting and coloring.
Summary
You learned:
- How to change the look of a text field.
- How to change the look of a button.
- How to include an external CSS file.
What now?
Let’s do some computations with data we get from users.
