Upload the Html File to Your Website (Most Common) Where
What is HTML Form :
HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of data such as username, password, contact number, e-mail id etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons etc. Using these elements the information of an user is submitted on a spider web server.
The form tag is used to create an HTML class.
Example of an HTML Form :
html
<!DOCTYPE html>
< html >
< body >
< course >
Username:< br >
< input type = "text" name = "username" >
< br >
Electronic mail id:< br >
< input type = "text" name = "email_id" >
< br >< br >
< input blazon = "submit" value = "Submit" >
</ form >
</ body >
</ html >
Output :
Input Element in HTML Forms :
Input Elements are the most common elements which are used in HTML Forms. Various user input fields tin be created such as textfield, check box, password field, radio push, submit button etc. The nigh mutual input elements are listed below:
- Text Field in HTML Forms :
The text field is a ane line input field allowing the user to input text. Text Field input controls are created using the "input" element with a type attribute having value as "text".
html
<!DOCTYPE html>
< html >
< body >
< h3 >Case Of Text Field</ h3 >
< class >
< label for = "EMAIL ID" >Email Id:</ characterization >< br >
< input type = "text" proper noun = "Email id" id = "Email id" >
</ form >
</ body >
</ html >
Output:
- Countersign Field in HTML Forms :
Password fields are a type of text field in which the text entered is masked using asterisk or dots for prevention of user identity from another person who is looking onto the screen. Password Field input controls are created using the "input" element with a type aspect having value equally "countersign".
html
<!DOCTYPE html>
< html >
< body >
< h3 >Example of Countersign Field</ h3 >
< form >
< label for = "user-password" >Password:
</ characterization >< br >
< input type = "password" proper name = "user-pwd"
id = "user-countersign" >
</ form >
</ body >
</ html >
- Output :
- Radio Buttons in HTML Form :
Radio Buttons are used to allow the user select exactly one option from a list of predefined options. Radio Push button input controls are created using the "input" element with a type attribute having value as "radio".
html
<!DOCTYPE html>
< html >
< trunk >
< h3 >Example of Radio Buttons</ h3 >
< course >
SELECT GENDER
< br >
< input type = "radio" proper name = "gender" id = "male person" >
< label for = "male" >Male</ label >< br >
< input type = "radio" name = "gender" id = "female person" >
< label for = "female" >Female person</ label >
</ form >
</ body >
</ html >
- Output :
- Checkboxes in HTML Form :
Checkboxes are used to permit the user select 1 or more options from a pre-defined set up of options. Checkbox input controls are created using the "input" element with a type attribute having value as "checkbox".
html
<!DOCTYPE html>
< html >
< body >
< h3 >Example of HTML Checkboxes</ h3 >
< form >
< b >SELECT SUBJECTS</ b >
< br >
< input blazon = "checkbox" name = "subject" id = "maths" >
< characterization for = "maths" >Maths</ label >
< input blazon = "checkbox" name = "subject" id = "science" >
< characterization for = "science" >Science</ characterization >
< input type = "checkbox" name = "subject area" id = "english" >
< label for = "english language" >English</ characterization >
</ course >
</ body >
</ html >
- Output :
File select boxes in HTML Forms :
File select boxes are used to allow the user to select a local file and ship it as an attachment to the web server.It is similar to a text box with a button which allows the user to browse for a file.Instead of browsing for the file, the path and the name of the file can also be written. File select boxes are created using the "input" element with a type aspect having value as "file".
html
<!DOCTYPE html>
< html >
< torso >
< h3 >Case of a File Select Box</ h3 >
< form >
< label for = "fileselect" >Upload:</ label >
< input blazon = "file" name = "upload" id = "fileselect" >
</ class >
</ body >
</ html >
Output :
Text area in an HTML Form :
Text Area is a multiple line text input control which allows user to provide a description or text in multiple lines. A Text Area input control is created using the "textarea" element.
html
<!DOCTYPE html>
< html >
< body >
< h3 >Instance of a Text Surface area Box</ h3 >
< form >
< label for = "Description" >Description:</ label >
< textarea rows = "5" cols = "50" name = "Description"
id = "Description" ></ textarea >
</ form >
</ trunk >
</ html >
Output :
Select Boxes in HTML Forms :
Select boxes are used to allow users to select one or more than 1 pick from a pull-downwards list of options. Select boxes are created using two elements which are "select" and "option".Listing items are defined within the select chemical element.
html
<!DOCTYPE html>
< html >
< body >
< h3 >Example of a Select Box</ h3 >
< course >
< label for = "country" >Land:</ label >
< select proper noun = "state" id = "land" >
< selection value = "India" >India</ pick >
< choice value = "Sri Lanka" >Sri Lanka</ option >
< option value = "Commonwealth of australia" >Australia</ option >
</ select >
</ form >
</ body >
</ html >
Output :
Reset And Submit Buttons :
The Submit Push button allows the user to transport the form information to the web server. The Reset Button is used to reset the form data and use the default values.
html
<!DOCTYPE html>
< html >
< trunk >
< h3 >Example of a Submit And Reset Button</ h3 >
< form action = "test.php" method = "mail service" id = "users" >
< label for = "username" >Username:</ label >
< input type = "text" proper noun = "username" id = "Username" >
< input type = "submit" value = "Submit" >
< input type = "reset" value = "Reset" >
</ class >
</ torso >
</ html >
Output :
Attributes Used in HTML Forms
The Activeness Aspect :
The action to be performed after the submission of the form is decided by the activeness attribute. Generally, the course data is sent to a webpage on the web server later on the user clicks on the submit button.
Example :
html
<!DOCTYPE html>
< html >
< body >
< h3 >Example of a Submit And Reset Button</ h3 >
< form action = "test.php" method = "post" id = "users" >
< label for = "username" >Username:</ label >
< input type = "text" proper name = "username" id = "Username" >
< input type = "submit" value = "Submit" >
< input type = "reset" value = "Reset" >
</ form >
</ trunk >
</ html >
If you click the submit button, the form data would be sent to a page called test.php .
The Target Attribute in HTML Forms :
The Target attribute is used to specify whether the submitted result volition open in the electric current window, a new tab or on a new frame. The default value used is "self" which results in the form submission in the aforementioned window. For making the course result open in a new browser tab, the value should be set up to "blank".
html
<!DOCTYPE html>
< html >
< body >
< form action = "/test.php" target = "_blank" >
Username:< br >
< input type = "text" proper name = "username" >
< br >
Countersign:< br >
< input type = "password" name = "password" >
< br >< br >
< input type = "submit" value = "Submit" >
</ grade >
</ body >
</ html >
Subsequently clicking on the submit button, the effect will open in a new browser tab.
Proper name Aspect in Html Forms :
The name attribute is required for each input field. If the name attribute is non specified in an input field then the information of that field would not be sent at all.
html
<!DOCTYPE html>
< html >
< body >
< grade action = "/test.php" target = "_blank" >
Username:< br >
< input type = "text" >
< br >
Countersign:< br >
< input type = "password" name = "password" >
< br >< br >
< input type = "submit" value = "Submit" >
</ class >
</ torso >
</ html >
In the in a higher place code, after clicking the submit button, the form information will be sent to a folio chosen /test.php. The information sent would not include the username input field data since the name aspect is omitted.
The Method Attribute :
It is used to specify the HTTP method used to ship data while submitting the form.There are 2 kinds of HTTP Methods, which are GET and POST.
The Go Method –
html
<!DOCTYPE html>
< html >
< body >
< grade action = "/exam.php" target = "_blank" method = "GET" >
Username:< br >
< input type = "text" proper noun = "username" >
< br >
Password:< br >
< input type = "password" proper noun = "countersign" >
< br >< br >
< input blazon = "submit" value = "Submit" >
</ form >
</ torso >
</ html >
In the Go method, after the submission of the grade, the form values will be visible in the address bar of the new browser tab.
The Post Method –
html
<!DOCTYPE html>
< html >
< body >
< class action = "/test.php" target = "_blank" method = "mail service" >
Username:< br >
< input type = "text" proper name = "username" >
< br >
Password:< br >
< input type = "password" proper name = "password" >
< br >< br >
< input type = "submit" value = "Submit" >
</ form >
</ body >
</ html >
In the post method, after the submission of the form, the form values will non be visible in the accost bar of the new browser tab as it was visible in the GET method.
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
HTML is the foundation of webpages, is used for webpage evolution by structuring websites and web apps.You lot tin learn HTML from the basis up past following this HTML Tutorial and HTML Examples.
Source: https://www.geeksforgeeks.org/html-design-form/
 Where){kind=link}
Post a Comment for "Upload the Html File to Your Website (Most Common) Where"