<div id=”forms“ class=”section”>

<h1>Forms</h1>

<p>Forms allow us to collect an input from a user and perform an action with their input.</p>

<div class=”example”>

<form onsubmit=”return alert(‘Form was submitted!’)” method=”post”>

<input type=”text“ name=”name” placeholder=”name”>

<input type=”text” name=”mail” placeholder=”email”>

<input type=”submit” value=”Submit”>

</form>

</div>

<input class=”code-show-button” type=”button”

onClick=”showCode(‘forms’)” value=”Show code” />

</div>

Note: as you can see from the above code, we have entered some simple JavaScript right into the ‘onsubmit’ attribute of the form opening tag. This is a great way to run simple operations on a web form. If you have checked out your website in the browser after adding this section, you might have noticed that the form is looking quite bland. Let’s improve the look and feel with some very simple CSS rules.

CSS

Head on over to your CSS file and add the following rule under the following property ‘form, input[type=text], input[type=submit]’:

• Width of 300px.
• A margin of 5px at the top and bottom and automatic at the sides.
• Padding of 10px.

Save your file and check out how it looks in your browser. You might notice a small quirk appearing to destroy the layout of our form. The boxes are being made bigger than our input button. This is because of the type of sizing we have applied to our elements. Let’s change that now with one simple rule in our CSS.