Forms

HTML

HTML Examples



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
nameSpecifies the name of the form.
methodSpecifies method to be used to upload data. Mostly used GET and POST.
actionSpecifies the script URL which will receive uploaded data.
targetSpecifies the target page where the result of the script will be displayed.
enctypeSpecifies 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
textDefines a one-line input field that a user can enter text.
passwordDefines a password field.
radioDefines a radio button, that let a user select only one of a limited number of choices.
checkboxDefines a checkbox, that let a user select more than one options of a limited number of choices.
fileDefines a file upload box, that allow a user to upload a file from website.
hiddenDefines a hidden field, that will want to pass information between pages without the user seeing it.
resetDefines a reset button, that resets form controls to their initial values.
submitDefines a submit button, that submits a form.
buttonDefines a button, that is used to trigger a client-side script when the user clicks that button.







Html Form <input> Attributes




















































Attribute Description
typeSpecifies the type of input fields to display.
nameSpecifies the name of an input field.
sizeSpecifies the width, in characters, of an input field.
acceptSpecifies the types of files that the server will accepts by file type input field.
alignSpecifies the alignment of an image input field. (Not supported in HTML 5.)
altSpecifies an alternate text for images input field.
checkedSpecifies that an radio input field that should be pre-selected when the page loads.
disabledSpecifies that an input field as disabled.
maxlengthSpecifies the maximum number of characters allowed in an input field.
readonlySpecifies that an input field is read-only.
srcSpecifies the URL of the image input field to use as a submit button.
valueSpecifies 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>