How To Build HTML Forms?

-

HTML Form Tutorial:

Creating forms in HTML:

What are the forms in HTML and how to create forms in HTML?

we are going to take a look at HTML5 forms basics and HTML form designs. Forms in HTML5 are something we use a lot when we are on a website. They used to collect information

You might have filled out contact information on a website and when you submit that it is handled by the Web-page in HTML.

1.One-line text box :

Tag used: <input> we are going to create input fields in HTML. Now it all starts with a form element tag. The form element is just used to declare that this is the form that we are going to submit. We have to put the input element inside the form element. The most common input element is a one-line text box.
For this we use <input type= “text” name= “ ”> Input tag doesn’t need closing and we have mentioned the type is text. We can add the size of the box by using the size attribute.

The ‘name’ attribute is a JavaScript part, so don’t worry about that I will explain it in my JavaScript article.

<!doctype html>


<html>

<head> One line text box</head>

<body style="background-color:lightgray;">


<form action="" method="">

<input type="text" name=""> </br> </br>

<input type="text" name="">

<!-- Input elements go in here -->

</form>

</body>


</html>


OUTPUT:



2.Lable to the text box:


Tag used : <label>

label HTML for adding in an empty text box<label > tag is used. This should have an opening and closing tag. For example: We want to tie this to the input element. And we do that by ‘for’ element. You can give any name to the ‘for’ element. We have to create another attribute in the ‘input’ element which is ‘id’ and it should be matched with the ‘for’ element. And that’s what ties them together.

<!doctype html>

<html>

<head> Lable to text box</head>

<body style="background-color:lightgray;">


<form action="" method="">

<label for="firstname">First Name:</label>

<input type="text" id="firstname" name=""> </br> </br>


<label for="lastname"> Last Name:</label>

<input type="text" id="lastname" name=""> 


<!-- Input elements go in here -->

</form>

</body>


</html>


OUTPUT:


3.Field box and legend elements :

If you want to add a box around your form or any particular part of your form then you can use the field box tag.

This element has an opening and closing tag. This is denoted as a <fieldset>.
And legend element is used for nt tag is used to bring your text from inside the box to running the border of the field box.

For this <legend > tag is used with both opening and closing pattern.



4.Multi-line text box:

Tag used : <textarea>


 If you want to add multiple lines in the text box then this is used. And the element tag used is <textarea> input HTML. Unlike a one-line text box, you need a closing tag for a multi-line text-box. 


For example: 

<textarea rows= “40” cols= “ 10”> </textarea>


From this example, we can add a multi-line text box having rows “40” and columns “10”.

I want to and label this you can add it by just typing simple text.



<!doctype html>

<html>

<body style="background-color:lightgray;">


<h2>Multi line text box</h2>

<p>The textarea element defines a multi-line Text box.</p>


<form action="/action_page.php">

<textarea name="message" rows="5" cols="30">HTML is basic of web development

</textarea>

</br> </br>


<input type="submit">

</form>

</body>


</html>


OUTPUT:



5.Number input box:

Tag used : <input>

In this box, you can add only numbers. By giving text type as a number in the input tag you can get a number input box. 

Also, you can give a maximum and minimum range of numbers.
For this we use <input  type= “number”  min= “ 0 ”   max= “20”>

For example:
<input type="number" min ="0" max="50">

OUTPUT:


6.HTML Forms Email Address : 

Tag used : <input>


If you want to add an input field that contains an email in HTML form then we use

<input type = “email”>. 


Some smartphones automatically recognize and add ‘.com’ to the keyboards for matching the email address input.


HTML Form code for Email Address:
<label for="email">Enter your email id:</label>

<input type="email" id="email" name="email">


OUTPUT:


7.HTML Forms File Upload:

Tag used : <input>


How to add pdf files in HTML form?


We see that option to add a resume or any of your certificates in the forms on the web page.

So how to create that option in form?


<input type= “file”> is used for adding files in the forms. And you have one “browse” button below that for uploading files from your computer. 


HTML forms upload file is a very important function.


Example:

<label for="myfile">select file:</label>

<input type="file" id="myfile" name="myfile">


OUTPUT:


8.Date and number box:

Tag used : <input>


In this, we are going to create a date and number box. If you want to add the date and number in your form.


 For this, you are going to give type as the date and name as day. 


For this we can use <input type= “date” name= “  ”>


You can use ‘max’ and ‘min’ attributes for giving restrictions to dates. 


Example:

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday">



OUTPUT:


9.Radio button:

Tag used : <input>

Radio buttons are those small circular buttons on websites that are used to survey or ask users their preferences. Radio buttons are used to select one choice from many options. 

If you give different names to the radio buttons then it will select all the buttons. That’s why you should give the same name so that it will select one among them. 

Value is just server-side code or you can say whatever be the answer is sent as a value to a server.


Example:
<input type="radio" id="age1" name="age" value ="30">

<label for="age1">0-30</label>


OUTPUT:


10.Checkbox:

Tag used : <input>

The checkbox is the same as a radio button but the only difference is you can select multiple answers or choices in a checkbox. This is the only major difference between radio buttons and checkbox

For example:
Which game are you interested in? <br>
<input  type= “checkbox”  name = “ ”> “football” <br>
<input  type= “checkbox”  name = “ ”> “basketball” <br>

So you can select all or whichever game you want to select from this list. And as you know the type of the button is a checkbox.

<input type="checkbox" id="Education1" name=" Education1"value ="Computer Engineering">

<label for="Education1">Computer Engineering</label>


OUTPUT:

  

11.Dropdown list:

Tag used: <select>

This is a little bit different from the checkbox. In a drop-down, you can select one from multiple choices.  We use the “ select”  element in the drop-down list. 

Opening and closing of the select tag are necessary. Then we use the “option” element. You can add as many as an option you want to give to users. The first option in the drop-down list is by default get selected. 

For example:
Code for dropdown list in HTML:
<Select>
<option value= “ 1 ”></option>
<option value= “ 2 ”></option>
</select>

That is users can select only one value from 1 or 2 from drop-down options.

<!doctype html>

<html>

<body style="background-color:lightgray;">


<h2>The Drop-Down Element</h2>

<form action="" method="">
<label for="Education">Choose your education:</label>
<select id="Education" name="Education">
    <option value="B.E">B.E</option>
    <option value="BTech">BTech</option>
    <option value="BCom">BCom</option>
    <option value="BBA">BBA</option>
</select>

<input type="submit">

</form>

</body>


</html>


OUTPUT:


12.Submit button:

Tag used: <input>

After filling the information in the form you see one submit button on the webpage. Basically, it is for submitting your information to the form-handler.
So, how to create a form HTML submit button on your web-page? <input type= “submit”> is used for creating the submit your form.
This is basically used under the forms “action” attribute.

13.Action attribute:

After submitting the form which action to be performed is defined by the “action” attribute. When a user submits the form, all the data in the form is sent to the server. If you don’t use the action attribute, the action remains on the current webpage.

14.Target attribute:

The target attribute is used to specify the where to show the reaction that is gotten after submitting the form.

Target attribute take values:
1._self: This value is a default value. This is used for opening the response on the same tab or on the same window.
2._blank: This is used for opening the response on the new tab or on the new window.
3._parent: This is used for opening the response on the patent tab or window.
4._top: This is used for opening the response on the full body of the window.
5._framename: This is used for opening the response on the named iframe

There are some HTML forms builder or HTML forms generators free available in the market. HTML forms online easily created and used.

Comments

Post a Comment

Popular posts from this blog

How To Become Front End Developer In Easy Way

-
Image
Technology assumes a huge job in our everyday lives, from the simplest of applications to the most ground-breaking developments. Each site or piece of programming that we experience has been worked by a web engineer -yet what precisely is web development, and what do web designer do? Responsive Web Design is utilized in a wide range of present-day web development. Let’s get some foundation first, however —we have to figure out how to walk before we can run. How to become a web developer from scratch is always a question for a lot of students who don’t have more knowledge about coding. Essential steps you'll have to take toward turning into a web developer:  Make sense of The Skills You'll Need  Assemble Experience (While Learning) Through Test Web Development Projects  Locate the Ideal Web Developer Jobs for Your Goal It's essential to note there are two classes of web developer jobs:  Front-end developer  Back-end developer I n
Read more

Why is HTML5 so popular nowadays?

-
Image
INTRODUCTION TO HTML: Even if your goal is not to become a web developer or web designer and do it professionally, still learn HTML and CSS because it’s an amazing skill to have, especially in today’s day and age. HTML is an invaluable skill.   HTML is the bedrock of the World Wide Web and if you are going to do anything even in other languages involving the web it is highly important you know HTML. Web development broadly refers to the task related to your web applications or web pages. It basically adds up life to your ordinary web page. And HTML is the first and basic step towards your web development career. HTML full form HyperText Markup Language. It’s basically just a language that we can use to create web pages. So, if you have ever been on the internet almost every single page on the internet was written in this language called HTML.  HTML adds meaning to raw content by marking it up. HTML describes the structure of web pages using a process called markup.HTML mostly consists
Read more

Improve Your HTML5 Formatting And HTML5 Image tag

-
Image
  HTML5 Tags for line break,spacing,comments 1.Tags For line break :  For line break in HTML , the <br> tag is used.  As this is an empty tag it does not need a closing tag. If you want a break of three lines then three times break tag should be used.   It is used for writing addresses or poems. It is used for adding breaks in line not for adding spaces in the paragraph. This tag supports Global Attributes and Event Attributes in HTML. SYNTAX: <br>Learning Web development <br> is easy <br> with techfreaktalks. PROGRAM: < !DOCTYPE HTML > < HTML > < body > < h1 > The br element < /h1 > < p >< br > Learning Web development < br > is easy < br > with techfreaktalks  < /p > < /HTML > < /body > OUTPUT: 2.For additional spacing (HTML for space) : Additional spaces in HTML cannot be added by clicking the space-bar multiple times. HTML spacing code is“ &nbsp;”.  nbsp stands for n
Read more