How to create a form with HTML5

HTML is simple but to create a nice form you should follow these steps.

1- Add form tag to your HTML document like below.

<form >

</form>

2- Most of the time web form used to submit data to a server, you can add your server URL to action form attribute like below.

<form action="/url-where-you-want-to-submit-form-data">
 
</form>

Change the URL to your server URL to save the form data to your server.

3- You should put input in your for to take the data from user like below.

<form action="/url-where-you-want-to-submit-form-data">
  <input>
</form>

4- Now you need to add submit button to your form, clicking this button will send data from your form to the URL you specified with your form action attribute.

<form action="/url-where-you-want-to-submit-form-data">
  <input>
  <button type="submit">this button submits the form</button>
</form>

Make sure you add type attribute within button element and set it’s value to submit.

5- You can make any specific field require, it means that user will not be able to submit the form until he/she has field them out.

For example if you wanted to make a text field required you can just add attribute required within your input element like this.

<form action="/url-where-you-want-to-submit-form-data">
  <input type="text" required>
<button type="submit">this button submits the form</button>
</form>

6- Sometime you need to add radio buttons to your form for any reason you want, it is also kind of taking specific data from user and it’s almost single choice.

Radio buttons are type of input.

Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.

Note: you should set the type of input to radio like below.

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>

It’s considered good to set for attribute on label element with the value that match the value of id attribute of it’s input.

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.

For example

<form action="/url-where-you-want-to-submit-form-data">
  <input type="text" required>
  <label for="indoor"> 
    <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
  </label>
  <label for="outdoor"> 
    <input id="outdoor" type="radio" name="indoor-outdoor">outdoor 
  </label>
  <button type="submit">this button submits the form</button>
</form>

Note: You can set a radio button to be checked by default by add checked attribute

<input type="radio" name="test-name" checked>

7- For questions that have more than one answer, forms commonly use checkbox.

Checkboxes are type of input too.

Each of your checkboxes can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the checkbox input with the label element surrounding it.

<label >
  <input id="loving" type="checkbox" name="personality"> Loving
</label>

All related checkbox inputs should have the same name attribute.

It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element.

<label for="loving">
  <input id="loving" type="checkbox" name="personality"> Loving
</label>

A complete form example is here

<form action="/url-where-you-want-to-submit-form-data">
  <input type="text" required>
  <label for="indoor"> 
    <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
  </label>
  <label for="outdoor"> 
    <input id="outdoor" type="radio" name="indoor-outdoor">outdoor 
  </label>
  <label for="loving">
  <input id="loving" type="checkbox" name="personality" required>     Loving
  </label>
  <label for="lazy">
    <input id="lazy" type="checkbox" name="personality" required> Lazy
  </label>
  <label for="energetic">
    <input id="energetic" type="checkbox" name="personality"   required> Energetic
  </label>
  <button type="submit">this button submits the form</button>
</form>

Note: You can set a checkbox to be checked by default by add checked attribute

<input type="checkbox" name="test-name" checked>

If you have any question, please ask me on twitter.

https://twitter.com/MarufSharifi