Whether it be a Gmail account Sign up or a personal data entry, at some point in everyones life, we’ve dealt with a form, Is’nt it? Have you ever thought of making these forms all by yourself? If not, let’s get started..!!
With a basic knowledge of HTML and CSS , one of the simplest projects you can do to make your web development fundamentals strong is a Basic HTML Form. For doing this get in touch with a good text editor like Atom or Sublime. In this tutorial post, I’m making a Contact form which can be used in many applications.
Just have a quick review on basic html tags and css commands here.
1.Open your text editor
Open a new untitled file and save it in “.html” format. Start with <html> tag. Specify your suitable heading and include your stylesheet and scripts inside the< head> tag. If you want to include any Google fonts specify the link in the <link> tag. Close your head tag.
To make all the input boxes aligned and to make it centered in the web page , I’ve used a feature called a flexbox. It’s just a div tag given to whole html code and the div is styled according to the commands given inside style tag. Read more about how to use flexbox here.
2. Building your Form
Start by opening your body tag. Since we are creating an HTML form , a form tag is required to enclose all details of the form. I’ve used an unordered list (<ul><li>) for the inputs to be in order and to display as a list. (Not necessary, just input tags are fine:). Inside the form,give input tag with type as text and also with a suitable placeholder text. For inputs such as numbers or email address, type can be specified as number or email respectively. Keep in mind to give a suitable name in each input tag, so to target the inputs for future applications. The code is written for ten input boxes in the below pic.
Don’t forget to specify ample amount of class names in each div tag so as to make the styling easier for each division. A “Submit” button is also attached using the button tag and input type as submit to collect all the responses from each input box.
3. Style your Form
Brush up your CSS , to get it speedy here..!!
Open a new untitled file and save it in “.css” extension. Include this style sheet in the link tag inside the head tag.
Target each class using the syntax “.class-name” and style accordingly using the commands. Give the measurement of each styling in pixels. Refer the code below to complete your stylesheet.
4. Make it Mobile Responsive
In this life where smartphones don’t get free from our hands, who doesn’t want our form to be properly viewed on a mobile? To make our Html form to fit suitably in the width of our mobile screen or tablet, it should be made responsive to different dimensions. For making it responsive, I’m using mediaQuery (can also be made responsive by bootstrap or other methods).
Target the enclosing classes inside mediaquery (@media), correcting the width of each enclosing div not exceeding more than 500 pixels. Copy the code below to make our form mobile responsive.
Include this code to your style sheet. To check whether your has become responsive or not, adjust your browser size by going to Tools->Web Developer->Responsive Design Mode (I’m using Mozilla Firefox web browser for development purposes:).
The final HTML form will look like:
In Responsive mode,
If you had a meddle with the pictures, get the full source code here:Html code CSS code
Get more advanced..!! Also read:Make your own website within minutes..!!
Happy learning..!! 🙂