--- title: Example slug: Learn/Forms/Your_first_form/Example tags: - Beginner - CodingScripting - Example - Forms - Guide - HTML - Learn - Web --- This is the example code for the article [Your first HTML form](/en-US/docs/Learn/Forms/Your_first_form). ## A simple form ### HTML Content ```html
 
         
 
         
 
         
 
     
``` ### CSS Content ```css form {   /* Just to center the form on the page */   margin: 0 auto;   width: 400px;   /* To see the limits of the form */   padding: 1em;   border: 1px solid #CCC;   border-radius: 1em; } div + div {   margin-top: 1em; } label {   /* To make sure that all label have the same size and are properly align */   display: inline-block;   width: 90px;   text-align: right; } input, textarea {   /* To make sure that all text field have the same font settings      By default, textarea are set with a monospace font */   font: 1em sans-serif;   /* To give the same size to all text field */   width: 300px;   -moz-box-sizing: border-box;   box-sizing: border-box;   /* To harmonize the look & feel of text field border */   border: 1px solid #999; } input:focus, textarea:focus {   /* To give a little highligh on active elements */   border-color: #000; } textarea {   /* To properly align multiline text field with their label */   vertical-align: top;   /* To give enough room to type some text */   height: 5em;   /* To allow users to resize any textarea vertically      It works only on Chrome, Firefox and Safari */   resize: vertical; } .button {   /* To position the buttons to the same position of the text fields */   padding-left: 90px; /* same size as the label elements */ } button {   /* This extra margin represent the same space as the space between      the labels and their text fields */   margin-left: .5em; } ``` ### Result {{ EmbedLiveSample('A_simple_form', '100%', '280') }}