HTML Forms Yaser Rahmati | یاسر رحمتی
HTML forms are used to collect user input in a web application. They’re a crucial part of web development, allowing users to submit data such as text, selections, and files. Here’s a basic overview of HTML forms and how to use them:
Basic Structure
An HTML form is defined with the <form>
element. Inside the form, you use various input elements to gather data from users. Here’s a simple example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Simple Form</ title >
</ head >
< body >
< form action = "/submit" method = "post" >
< label for = "name" >Name:</ label >
< input type = "text" id = "name" name = "name" required >
< br >
< label for = "email" >Email:</ label >
< input type = "email" id = "email" name = "email" required >
< br >
< label for = "message" >Message:</ label >
< textarea id = "message" name = "message" rows = "4" cols = "50" required ></ textarea >
< br >
< input type = "submit" value = "Submit" >
</ form >
</ body >
</ html >
Key Attributes
action
: Specifies the URL where the form data will be sent when the form is submitted. This could be a server endpoint or a script.
method
: Determines how the data will be sent. The common methods are:
GET
: Appends form data to the URL. This method is suitable for simple data retrieval and is less secure.
POST
: Sends form data in the request body, which is more secure and suitable for sensitive information or large amounts of data.
Input Elements
Text Input : Allows users to enter text.
Copy < input type = "text" id = "name" name = "name" required >
Email Input : Specifically for email addresses. The browser can validate the format.
Copy < input type = "email" id = "email" name = "email" required >
Password Input : Hides user input for passwords.
Copy < input type = "password" id = "password" name = "password" required >
Textarea : For multi-line text input.
Copy < textarea id = "message" name = "message" rows = "4" cols = "50" required ></ textarea >
Radio Buttons : Allow users to select one option from a set.
Copy < input type = "radio" id = "male" name = "gender" value = "male" >
< label for = "male" >Male</ label >
< input type = "radio" id = "female" name = "gender" value = "female" >
< label for = "female" >Female</ label >
Checkboxes : Allow users to select multiple options.
Copy < input type = "checkbox" id = "subscribe" name = "subscribe" value = "newsletter" >
< label for = "subscribe" >Subscribe to newsletter</ label >
Select Dropdown : Provides a dropdown menu for selecting one option from a list.
Copy < label for = "country" >Country:</ label >
< select id = "country" name = "country" >
< option value = "usa" >United States</ option >
< option value = "canada" >Canada</ option >
< option value = "uk" >United Kingdom</ option >
</ select >
File Input : Allows users to upload files.
Copy < input type = "file" id = "file" name = "file" >
Submit Button : Submits the form data.
Copy < input type = "submit" value = "Submit" >
Form Attributes
required
: Specifies that the input field must be filled out before submitting the form.
placeholder
: Provides a hint to the user about what to enter in the field.
value
: Specifies the default value of the input field.
Example Form
Here’s a more comprehensive example including various input types:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Advanced Form</ title >
</ head >
< body >
< form action = "/submit" method = "post" >
< label for = "username" >Username:</ label >
< input type = "text" id = "username" name = "username" placeholder = "Enter your username" required >
< br >
< label for = "password" >Password:</ label >
< input type = "password" id = "password" name = "password" placeholder = "Enter your password" required >
< br >
< label for = "email" >Email:</ label >
< input type = "email" id = "email" name = "email" placeholder = "Enter your email" required >
< br >
< label for = "bio" >Bio:</ label >
< textarea id = "bio" name = "bio" rows = "4" cols = "50" placeholder = "Tell us about yourself" required ></ textarea >
< br >
< label >Gender:</ label >
< input type = "radio" id = "male" name = "gender" value = "male" >
< label for = "male" >Male</ label >
< input type = "radio" id = "female" name = "gender" value = "female" >
< label for = "female" >Female</ label >
< br >
< label for = "newsletter" >Subscribe to newsletter:</ label >
< input type = "checkbox" id = "newsletter" name = "newsletter" value = "yes" >
< br >
< label for = "country" >Country:</ label >
< select id = "country" name = "country" >
< option value = "usa" >United States</ option >
< option value = "canada" >Canada</ option >
< option value = "uk" >United Kingdom</ option >
</ select >
< br >
< label for = "file" >Upload a file:</ label >
< input type = "file" id = "file" name = "file" >
< br >
< input type = "submit" value = "Submit" >
</ form >
</ body >
</ html >
Keywords
HTML
, Hypertext Markup Language
, Tags
, Elements
, Attributes
, Head
, Body
, Paragraph
, Heading
, Title
, Meta
, Link
, Image
, Anchor
, Hyperlink
, List
, Table
, Form
, Input
, Button
, CSS
, Class
, ID
, Inline
, Block
, Div
, Span
, Script
, Styles
, Font
, Color
, Background
, Margin
, Padding
, Border
, Doctype
, HTML5
, Video
, Audio
, Canvas
, SVG
External Links
🌐 Personal Website 📄 Resume 🎥 Video Archive 💼 Finance Blog 🔐 Network & Security Notebook 🎬 Aparat Channel
Last updated 3 months ago