HOW TO CREATE YOUR OWN HTML FORM

CREATING DYNAMIC WEBPAGES

Today most of the Web pages, such as Registration and Login pages, have some way of accepting input from a user.To design such Web pages, you need to use several elements, known as form elements, which enable the user to input values.The data entering these form elements needs to be processed further upon submission.Every Web pages should respond to end user actions, such as clicking a submit button, changing a value in a field, or making a selection from a list.All this actions are referred to as events and need to be handled appropriately.


CREATING FORM

To create a form on Web page , you need to use the <FORM> tag. The <FORM> tag helps you to define a form. It has an opening<FORM> and closing </FORM>tag. The following syntax is used to specify the <FORM> tag

<FORM[attribute list]>
..
..
</FORM>

The <FORM> tag support the following attribute:

  • name
  • Id
  • action
  • autocomplete
  • method
  • novalidate
  • target
name

The name attribute is used to specify a unique name of a form. It is used to uniquely identify a form in the get or post methods at the time of form submission. In addition, multiple form can be present on  a Web page. These form can be differentiated using the name attribute. The following syntax is used to specify a name for a form.

<FORM name =" User defined name">...</FORM>

ID

The ID attribute is used to specify a Unique ID for the form element on a Web page. The ID attribute should be unique in the entire HTML document. Both the ID and the name attributes are used to uniquely identify a form element on the Web page. However the ID given to a form element is used when you need to reference it with style sheet or scripts. 
You can assign a unique ID to a form element by using this attribute.
The following syntax is used to specify a ID for a form.

<FORM ID =" User defined ID">...</FORM>

action

The action attribute specifies the URL of the page to which the content of the form are submitted. If this attribute is missing , the URL of the document itself is assumed as the location for the form submission. The following syntax is used for the action attribute to specify the URL of the page.

<FORM action =" filename or URL">

autocomplete

The autocomplete attribute is used to specify whether a form should have the autocomplete feature on or off. If it is on, the browser automatically completes the value in the fields based on the values that the user has entered before. The following syntax is used to specify the autocomplete attribute for a form:

<FORM action =" fileID" autocomplete= "on">

method

Thee method attribute is used to specify the format in which the data will be submitted to the file or the URL specified in the action attribute. It can take either of the following values:

  • get
  • post
the default value of the method attribute is get.

get


The get value append the form data to the URL of the form as the name value pair at the time of form submission. Since the data is appended to the URL it is always visible to the users. Also, the size of the data that can be submitted using the get method is limited to only 3000 characters.

post

The post value does not append the form data to the URL of the form when it is submitted.Therefore the data is not shown in the URL and offers a secure way of submitting the data.This method can be used to send textual as well as image data.

novalidate

The novalidate attribute specifies that the data in the form should not be validated by the browser at the time of the data submission. It is an empty attribute that does not contains any value. The following code snippet is used to specify the novalidate attribute for a form:
<FORM ID=" fileID" novalidate>

target

The target attribute is used to specify the name of the frame or the window in which the response obtained after submitting the form needs to be displayed. The following syntax is used to specify the target attribute for a form:
<FORM target="_blank|_self|_parent|_top|frame_name">


DESIGN HTML FORM

Consider a scenario of FoodExpress.com.This website facilitates customers to place online orders with various restaurants.For this, customers need to provide various details such as, name,contact number and address in an online form name as OrderFoodOnline,


Consider the following code to create input fields such as text, date, telephone number, email, and radio for the OrderFoodOnline Webpages:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<STYLE>
body{
background-color: #FFEBCD;
}
.autostyle2{
color:red;
font-size: 20px;
text-align: center;
}
</STYLE>
</HEAD>
<BODY bgcolor="#FFEBCD">
<FORM action="registration.html">
<TABLE>
<TR class="autostyle2">
<TD colspan="4">OrderFoodOnline</TD></TR>
<TR>
<TD WIDTH="100%" COLSPAN="4">
</TD>
</TR>
<TR>
<TD>Name:</TD>
<TD><INPUT type="text" name="username" placeholder="Enter Your Name" required></TD>
</TR>
<TR>
<TD>Date:</TD>
<TD><INPUT type="date" name="date" required></TD>
</TR>
<TR>
<TD>Email:</TD>
<TD><INPUT type="email" name="email" placeholder="Enter Your Email ID" required></TD>
</TR>
<TR>
<TD>Contact No:</TD>
<TD><INPUT type="Tel" name="usrtel" placeholder="Enter Your Phone Number required></TD>
</TR>
<TR><TD>Select Food</TD>
<TD>Non-Vegetarian<INPUT type="Radio" NAME="rd1">
Vegetarian<INPUT type="Radio" NAME="rd1"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
<HTML>


Result




About Codingwelove

Codingwelove
Recommended Posts × +

1 comments:

  1. good content. keep it up. and share more information regarding more topics of html.

    ReplyDelete