Styling input fields

See more about:

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 again. It’s the one we used in the previous lesson.

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() {
          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:

Plain page

Figure 2. Plain page

Let’s add some styling to create this:

Styled page

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() {
          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 in your page. You can do the same thing with CSS: put the CSS rules in a separate file, and include them.

Here’s line 6:

<link type="text/css" rel="stylesheet" href="game2.css">

This tells the browser to include the CSS file game2.css.

Here’s the CSS 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 not much new in the CSS rules themselves. Just the usual fonting and coloring. The only new things are on lines 12:

input {

and 16:

button {

They style all of the <input> and <button> tags on the page.

Notice how background-color works. It sets just the background color of the input fields and buttons.

input tag background color

Figure 6. <input> tag background color

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.


How to...

Lessons

User login

Log in problems? Try here


Dogs