December 14, 2018 · coding html

HTML Forms

When using the <form> element I only got the basic <form></form> input so i decied to make my own snippet through VSCode.

Using the html.json file I used the following code to adjust the <form> input to <form class="" action="index.html" method="post">

		"Amy's form Snippet": {
		"prefix": "form-amy",
		"body": [
			"<form class=\"\" action=\"index.html\" method=\"post\">"
			],
			"description": "Amy's form Snippet"
	}

I also updated the <input> snippet as well from <input></input> to <input type="" name"" value""> using the following code.

"Amy's input Snippet": {
		"prefix": "input-amy",
		"body": [
			"<input type=\"text\" name=\"\" value=\"\">,"
			],
			"description": "Amy's input Snippet"
	},

Entering a form option

Using the <form> element without any other html elements <input> or <label> renders the code useless. The <label> element is the display name label within the form. The <input> tag is the next most important element used in <form> - this is a self closing tag, instead you can define the input type using the type attribute.

There are many other option you can add using the <input> function - a list of them can be found on the MDN website

On the contact page I entered a <form> element and a <label> element and the <input> element using the code below.

<form class="" action="index.html" method="post">
    <label>Your Name:</label>
    <input type="text" name="" value="">
    <input type="submit" name="">
    <br>

To make this section usable it would need a submit button to push the imformation. The button would be coded through JavaScript. However, there is a HTML function that will enable you to create a submit button but it will have no output.

Simply add an extra <input> line and change the code to the folowing <input type="submit" name=""> - note that the value section was removed from the code.

11-2

Another option using the <input> element would be to add a check box
To do this you would need to add a label for the check box, using the '

    <label>Do you love cats?</label>
    <input type="checkbox" name="" value="">

22-3

To add a password box you need to add a '

        <label>Password</label>
    <input type="password" name="" value="">

33

HTML forms in practice

To make the <form> section have some function I have changed the code so that when someone fills out their details it will open up their email app with a prefilled form using the following code.

        <form action="mailto:[email protected]" method="post" enctype="text/plain">
        <label>Your Name:</label>
        <input type="text" name="" value=""><br>
        <label>Your Email:</label>
        <input type="email" name="" value=""><br>
        <label>Your Message:</label><br>
        <textarea name="name" rows="10" cols="30"></textarea><br>
        <input type="submit" name="">
    </form>

the action section was changed to mailto:[email protected]" and also added the attributeenctype` - this tag determines the type of formatting on the text entered. I chose plain text so that it displays correctly in the email app.

Also to add in a text box I needed to add a textarea element with the specified rows and collumn heigh <textarea name="name" rows="10" cols="30"></textarea><br>

In the <input> element in the name attribute you can enter the label that corresponds to the name, doing this will provide that correctly labelled information that will be pushed to the email clien. For example the following code

    <label>Your Name:</label>
        <input type="text" name="yourName" value=""><br>

will then input the following imformation in the email

4-2

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket