Skip to main content

8/100: Creating Forms in HTML

 Hey there, today is my last day of learning HTML and today I learnt about input forms. I have discussed about form element in this blog ahead. To give you a full insight of what did I learn in html in last 7 days, I have prepared a table.


Learnings till now in HTML
   Days   TopicsCode LinkBlog Link
    Day 1     Syntax   Syntax    Blog
    Day 2     Headings and
     Lists
   Headings
   Lists
    Blog
    Day 3     Formatting Tags   Formatting
    Blog
    Day 4     Images   Images    Blog
    Day 5     Tables   Table    Blog
    Day 6     Anchor Tag   Anchor    Blog
    Day 7     Navigation Bar   Navigation bar    Blog



Topics:

What is a form in html?

  • A form is used to take inputs from users.
  • HTML5 introduced <form> element which is very useful in websites.
  • A form element is a container element.
  • These inputs are then sent to the server where these inputs are processed and further actions are taken.
  • Mostly these form inputs are stored in a database.
  • A form contains many form controls such as a textbox, radio button, checkbox, submit button etc.
  • These controls are used for filling up the form.
  • Some examples of commonly used forms in websites are registration form, login form, add payment info form etc.
  • A brief introduction to such form controls is given below.


Input element and its types:

  • Input element is the most important form elements.
  • The <input> element specifies a input field in which users can fill required data.
  • The appearance of a input filed can be changed based on the "type" attribute.
  • Syntax of input element is given below:
<form>
        <input type="" name="" id="">
    </form>

  • Some of the commonly used input type attributes are listed below.
  1. text:
    • The type="text" attribute is used to create a single line input field.
    • This input field is a textbox, in which users can enter their name or user id or some plain text depending on what is asked.
    • The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
    • Syntax :
<input type="text" name="username" id="u_name">


  1. password:
    • The type="password" is used to enter password.
    • This type attribute encodes the password.
    • The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
    • Syntax:
<input type="password" name="pass" id="u_pass">

  1. email:
    • The type="email" is used for entering email id in the input field.
    • This attribute checks for a "@" sign and a ".com" to validate that entered data is an email id.
    • The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
    • Syntax:
<input type="email" name="email" id="u_email" placeholder="someone@gmail.com">

  1. tel:
    • The type="tel" attribute is used to enter phone number.
    • It checks for number in input field and does not takes alphabets or letters as a parameter.
    • The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
    • Syntax:
<input type="tel" name="phone" id="p_num" placeholder="9137000000">

  1. submit:
    • The type="submit" attribute is a submit button.
    • When clicked, this attribute submits the entered data to the server.
    • The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
    • Syntax:
<input type="submit" name="submit" value="Register" id="u_sub">

Create a form in html

The following code creates a simple form in html:
<form>
        <p>Enter your name: <input type="text" name="username" id="u_name" placeholder="John"></p>
        <p>Enter your password: <input type="password" name="pass" id="u_pass"></p>
        <p>Enter E-mail id: <input type="email" name="email" id="u_email" placeholder="someone@gmail.com"></p>
        <p>Enter Phone No.: <input type="tel" name="phone" id="p_num" placeholder="9137000000"></p>
        <p><input type="submit" name="submit" value="Register" id="u_sub"></p>
    </form>
    <form>
        <input type="text" name="username" id="u_name">
    </form>



The full code for this blog is available on my GitHub and all the blogs of html are listed below.

All Links:

Comments