Forms

HTML ⚭ Jun 6, 2016 ⚭ 305 views

Html Forms

Html Forms are important to collect data from the site visitor. For example registration information: name, email address, contact no, etc. User data will take as inputs of from and send to back-end application such as CGI, ASP script, PHP script or JSP script etc. Then, as per the instruction back-end application will do required processing on that data.

Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user.

Html Forms Attributes

Attribute	Description
name	Specifies the name of the form.
method	Specifies method to be used to upload data. Mostly used GET and POST.
action	Specifies the script URL which will receive uploaded data.
target	Specifies the target page where the result of the script will be displayed.
enctype	Specifies how the browser encodes the data before it sends it to the server.

<form> example


<form name = "formname" method = "post" target="_self" enctype = "application/x-www-form-urlencoded" action = "send.php">



</form>

Html Form Input Elements

Html web forms are a composition of input textfields, password fields, radio buttons, checkboxes, textareas, buttons, dropdown menus etc. embedded inside of Html documents.

The most important form element is the <input> element. An <input> element can vary in many ways, depending on the type attribute.

Html Form <input> Types

Type	Description
text	Defines a one-line input field that a user can enter text.
password	Defines a password field.
radio	Defines a radio button, that let a user select only one of a limited number of choices.
checkbox	Defines a checkbox, that let a user select more than one options of a limited number of choices.
file	Defines a file upload box, that allow a user to upload a file from website.
hidden	Defines a hidden field, that will want to pass information between pages without the user seeing it.
reset	Defines a reset button, that resets form controls to their initial values.
submit	Defines a submit button, that submits a form.
button	Defines a button, that is used to trigger a client-side script when the user clicks that button.

Html Form <input> Attributes

Attribute	Description
type	Specifies the type of input fields to display.
name	Specifies the name of an input field.
size	Specifies the width, in characters, of an input field.
accept	Specifies the types of files that the server will accepts by file type input field.
align	Specifies the alignment of an image input field. (Not supported in HTML 5.)
alt	Specifies an alternate text for images input field.
checked	Specifies that an radio input field that should be pre-selected when the page loads.
disabled	Specifies that an input field as disabled.
maxlength	Specifies the maximum number of characters allowed in an input field.
readonly	Specifies that an input field is read-only.
src	Specifies the URL of the image input field to use as a submit button.
value	Specifies the value of an input field when the page loads.

<form> example


<form name = "formname" method = "post" target="_self" enctype = "application/x-www-form-urlencoded" action = "send.php">

 <input type = "text" name = "username" size = "10" maxlength = "10"/>

 <input type = "password" name = "password" size = "10" />

 <input type = "radio" name = "gender" value = "Male" /> Male

 <input type = "radio" name = "gender" value = "Female" /> Female

 <input type = "checkbox" name = "eyecolor" value = "Black" /> Black

 <input type = "checkbox" name = "eyecolor" value = "Blue" /> Blue

 <input type = "file" name = "photo" >

 <input type = "hidden" name = "userid" value = "123" />

 <input type = "reset" name = "reset" value = "Reset" />

 <input type = "submit" name = "submit" value = "Submit" />

 <input type = "button" name = "cancel" value = "Cancel" />

</form>

Html Select Element

Html select fields provide essentially the same functionality as like Html Checkbox. They allow the user to select one or more values from a pre-determined series of options.

Select fields are define by the <select> tag into a web page. List values are then added to the field using the <option> tag.

<select> as dropdown example


<form name = "formname" method = "post" target="_self" enctype = "application/x-www-form-urlencoded" action = "send.php">

 <select name = "selectlanguage">

   <option value = "C">C</option>

   <option value = "C++">C++</option>

   <option value = "Java">Java</option>

   <option value = "Html">Html</option>

 </select>

 <input type = "submit" name = "submit" value = "Submit" />

</form>

<select> as multiple selection example


<form name = "formname" method = "post" target="_self" enctype = "application/x-www-form-urlencoded" action = "send.php">

 <select name = "selectlanguage" multiple = "yes">

   <option value = "C">C</option>

   <option value = "C++">C++</option>

   <option value = "Java">Java</option>

   <option value = "Html">Html</option>

 </select>

 <input type = "submit" name = "submit" value = "Submit" />

</form>

Html Multiple Line Text Input

An Html textarea is a multiple line text inpute field. Textareas in Html documents are define by the <textarea> tag. Any text placed between the opening and closing <textarea> tags will be rendered inside the <textarea> element as the "default" text.

<textarea> example


<form name = "formname" method = "post" target="_self" enctype = "application/x-www-form-urlencoded" action = "send.php">

 <textarea name = "default" col = "20" row = "5"> Pre-define text here </textarea>

 <textarea name = "aboutus" col = "20" row = "5"> </textarea>

 <input type = "submit" name = "submit" value = "Submit" />

</form>

Comments (0)

To add your comment please or