Forms are required when we want to collect data from the user. Html forms consists of different fields to take user inputs such as: input, text area, checkbox, password, radio button etc. Many languages are embedded with html forms to fully gain the potential use of it.
- Html: Create forms with different fields to accept user data.
- CSS: It enhances the style and presentation.
- JavaScript: It provide validations for form inputs.
- Server side languages: Like PHP. JAVA, .NET etc. different languages are used to process the data.
Syntax:
- <form attributes>
- Form elements like: input, text area, checkbox, password, radio button
- </form>
Form Attributes:
- action: It allows user data to be processed by running backend script.
- method: It is used to upload data by 2 methods GET & POST.
- target: It specify the target window where result is to be displayed.
- enctype: It specifies the browser on how to encodes the data before it sends to the server.
HTML Form Controls
- Input Controls: When user input the text then the text can be single line or multiple line thus we apply control.
- Single Line I/P Control: It is used when user required to enter only single line text as input such as in user name, search box etc. Syntax: <input>? tag.
- Multi Line I/P Control: When user details require multi-line or more than single line input. We use <textarea> tag.
|
1 2 3 4 5 6 7 8 9 |
<form> First name: <input type = "text" name = "first_name" /><br> Last name: <input type = "text" name = "last_name" /><br> <textarearowstextarearows = "5" cols = "50" name = "Description"> Enter description here... </textarea> </form> |
Output:
- Checkbox Control: It is used when user has to select more than one option i.e. multiple options.
Example: In case of Subject Selections, Song selection etc.
- <form>
- <input type = “checkbox” name = “maths” value = “on”>Maths
- <input type = “checkbox” name = “physics” value = “on”> Physics
- </form>
Output:
|
1 2 3 |
- Radio Button Control: It is used when out of many option we have to select one options. It is a one to many relations. Example: In case of Gender selection etc.
|
1 2 3 4 5 6 7 8 |
<body> <form> <input type = "radio" name = "male" value = "male"> Male <input type = "radio" name = "female" value = "female"> Female </form> </body> |
Output:
|
1 2 3 |
- Select Box Control: It is also known as drop down box where it provides a list and can select any single value from the list. Example: Selection of state, city etc.
|
1 2 3 4 5 6 7 8 9 |
<form> <select name = "dropdown"> <option value = "State" selected>State</option> <option value = "Assam">Assam</option> <option value = "Bihar">Bihar</option> </select> </form> |
Output:
|
1 2 3 |
- Button Controls: Button controls are the integrated attribute of tag with which we can create clickable buttons. Example: Submit button, Reset Button etc.
- <form>
- <input type = “submit” name = “submit” value = “Submit”>
- <input type = “reset” name = “reset” value = “Reset”>
- <input type = “button” name = “ok” value = “OK”>
- </form>
Output:
|
1 2 3 |
- File Upload Box: It allows user to upload file to some websites. It is also embedded with