How to Create a Simple HTML Form

For my first web page I wanted to create something simple, but also challenging for myself. I created some web pages whilst at university and have attempted it a few times since but lack of understanding was holding me back, and I found it very discouraging not getting far. So after a couple of courses on Codeacademy and some patient tutoring from my boyfriend (who is a web developer), I finally feel like I am getting somewhere.

I have never in the past managed to use forms or manipulate data using JavaScript on a web page so these were elements I wanted to include in my first project. I should mention that I am not new to coding or scripting, but am a complete noob to web development. In the end I wanted a page that was reminiscent of Lorem Ipsum text generators, but much simpler: here is the result. The user can enter some text and in return get a “Meow” filled paragraph.

So how did I do it? After some franctic googling and trying desperately to remember what I have learned at university about HTML, I have found that we need two main things to make a webpage: HTML and CSS. But in this example we will also need Javascript to be able to process user input.

HTML - HyperText Markup Language.

First things first is to create a file index.html and insert the basic HTML5 structure of a web page:

1
2
3
4
5
6
7
8

<!DOCTYPE html>
<html>
    <head>
        <title>Page title goes here</title>
    </head>
    <body>
    </body>
</html>

So lets explain each tag:

  1. <!DOCTYPE html> - here we are declaring that the document contains HTML5 markup.
  2. <head> - here you will store links to or definitions of scripts and stylesheets. Any description of the page content goes here, such as page title. Search engines will use this to add the page to their search index. This must be the first element in the <html> element.
  3. <title> - this defines the page title, which will be shown in the browser tab or title bar.
  4. <body> - this holds the content of the HTML page. This must be the second element in the <html> element.

At this stage opening index.html in the browser will produce an empty page with the tab title “Page title goes here”.

Earlier I mentioned that I wanted the page to have an input field and a button to process the input on click. Looking at the HTML 5 Element List, we can see that within the <form> we have <input> and <button> elements available to us. We will also need a <label> to caption the <input>. Here is them all added:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
    <head>
        <title>Meow</title>
    </head>
    <body>
    <div class="form-container">
        <form id="meow-form">
            <label>Type Anything:</label>
            <input id="meow-input" name="field" maxlength="255" type="text" autocomplete="off">
            <button type="submit">Go!</button>
            </form>
        </div>
    </body>
</html>

The form is within a container <div>, it can also be called a content <div>. Placing the form in the container will allow for more sophisticated CSS styling and to place the elements anywhere we want on the page with ease. There are a couple of thigs to explain here:

  1. class and id attributes. The class attribute in the <div> element assigns the element to a named class (in this case form-container). Multiple elements in the document can have the same class value, for any unique elements id is more appropriate. (Note: id must be unique in the document). However in this case, id could have also been used. I found a simple explanation of where to use which here. Both id and class are used as selectors in the stylesheet to style the elements (more on this later).
  2. <label> - simply has text to be used as a caption.
  3. <input> - we have given the input an id so that it can be styled later on.
  4. <button> - setting the type="submit" will submit form data when the button is pressed. This is the default option if nothing is specified.

Loading the index.html in the browser now gives us this:

CSS - Cascading Style Sheets.

CSS describes how a structured element (HTML or XML) must be rendered on screen.CSS can be:

  1. inline - using the style attribute in HTML elements.
  2. internal - using the <style> element in the <head> section.
  3. external - using an external .css file.

I am putting all CSS in an external style.css:

First we can set the body of the page to have a background image:

1
2
3

body {
    background: url(images/lined_paper.png);
}

The whole expression is a rule, and body is a selector, which selects which element the rules apply to.

Now we want to give the whole form a width and set the font. Earlier we have made the div that contained the form be of class “form-container”, in order to select elements of that class we have to put a . in front of the class name:

1
2
3
4
5

.form-container {
    margin: 90px auto;
    width: 400px;
    font-family: "Roboto Condensed";
}

We can give the input a desired width:

1
2
3

input {
    width: 200px;
}

And style the button:

1
2
3
4
5
6
7

button {
  background-color:#ED518A;
  height:37px;
  border: 3px solid #fff;
  color: #fff;
  display: inline-block;
}

By saying display the button as an inline-block we are actually telling it to stay on the same line.

Now we need to add a line in the <head> to load the external .css file and to load the custom Google font (the Google font link can be generated on Google Fonts website):

1
2
3
4
5
6

<head>
    <title>Meow</title>
    <link href="normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700,400' rel='stylesheet' type='text/css'>
</head>

After applying all the changes, our web page should now look like this:

Trying this in a few different browsers may yield a different result, but we can help the page to render consistently across different browsers by using something called Normalize.css. You can see that I have already included normalize.css in the <head>. There is also a project called reset.css, there are many different versions you can try, but here an overview of the main differences between reset.css and normalize.css.

JavaScript

Javascript is an (quasi) object-oriented language, widely used as a scripting language for web pages. To add javascript to our page we will create an external script called meow.js which we can include in the index.html:

1

<script type="text/javascript" src="meow.js"></script>

This is the full meow.js:

1
2
3
4
5
6
7
8
9
10
11
12

function send(event) {
    var input_text = document.getElementById("meow-input").value;
    document.getElementById("meow-output").value = meow(50,input_text);
    event.preventDefault();
};
function meow(times, input_text){
    var output = new Array(times);
    for (i=0; i< times; i++){
        output[i] = " meow " + input_text;
    }
    return output;
};

To explain briefly what is being done here: the function send(event) is called once the button is clicked. We are extracting the user input from the button with id meow-input and using it to calculate the output. The function meow(times, input_text) repeats the user input x number of times with the word “meow” in between.

We also need to tell the button to submit the information once it is clicked and use the function send (which is above), this I have done with some internal javascript:

1
2
3
4

<script type="text/javascript">
  var form = document.getElementById("meow-form");
  form.addEventListener('submit', send, true);
</script>

And that’s it!

Some useful resources:

  1. MDN - Mozilla Developer Network
  2. Can I Use…
  3. color.hailpixel.com
  4. StackOverflow

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.