HTML FORMS

-

HTML forms are used to collect user input and send it to a server for processing.

Basic Form Syntax

<form action="/submit" method="post">
  <!-- Form elements go here -->
</form>
  • action: URL where the form data is sent.
  • method:
    • GET – Sends data in the URL (used for searches).
    • POST – Sends data in the request body (used for sensitive or large data).

Common Form Elements

Text Input

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Password

<label for="password">Password:</label>
<input type="password" id="password" name="password">

Email

<input type="email" name="email" required>

Number

<input type="number" name="age" min="1" max="100">

Radio Buttons

<p>Gender:</p>
<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

<input type="checkbox" name="hobby" value="Reading"> Reading
<input type="checkbox" name="hobby" value="Sports"> Sports

Dropdown List

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="usa">USA</option>
  <option value="uk">UK</option>
  <option value="india">India</option>
</select>

Text Area

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>

Submit Button

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

Or

<button type="submit">Submit</button>

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Registration Form</title>
</head>
<body>

<h2>Registration Form</h2>

<form action="/submit" method="post">

    <label>Name:</label><br>
    <input type="text" name="name" required><br><br>

    <label>Email:</label><br>
    <input type="email" name="email" required><br><br>

    <label>Password:</label><br>
    <input type="password" name="password" required><br><br>

    <label>Gender:</label><br>
    <input type="radio" name="gender" value="Male"> Male
    <input type="radio" name="gender" value="Female"> Female
    <br><br>

    <label>Country:</label><br>
    <select name="country">
        <option>USA</option>
        <option>UK</option>
        <option>India</option>
    </select>
    <br><br>

    <label>Message:</label><br>
    <textarea name="message"></textarea>
    <br><br>

    <button type="submit">Register</button>

</form>

</body>
</html>

Frequently Used <input> Types

Input TypePurpose
textSingle-line text
passwordHidden password input
emailEmail address
numberNumeric input
telTelephone number
urlWebsite URL
dateDate picker
timeTime picker
datetime-localDate and time
colorColor picker
fileFile upload
checkboxMultiple selections
radioSingle selection
rangeSlider
searchSearch field
submitSubmit form
resetReset form
hiddenHidden value

Important Attributes

  • name – Identifies the data sent to the server.
  • id – Uniquely identifies an element.
  • value – Default value.
  • placeholder – Hint text.
  • required – Makes a field mandatory.
  • readonly – Prevents editing.
  • disabled – Disables the field.
  • maxlength – Maximum number of characters.
  • min / max – Minimum and maximum values.
  • pattern – Validates input using a regular expression.

HTML forms are a fundamental part of web development, enabling users to enter data that can be validated in the browser and submitted to a server.

Comments

Post a Comment

Popular posts from this blog

HTML | HTML INTRODUCTION

-
HTML is the standard markup language for creating Web pages. What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. A Simple HTML Document EXAMPLE:- <!DOCTYPE html> < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html > Example Explained The  <!DOCTYPE html>  declaration defines that this document is an HTML5 document The  <html>  element is the root element of an HTML page The  <head>  element contains meta information about the HTML page The  <titl...
Read more

HTML ELEMENTS

-
An HTML element is defined by a start tag, some content, and an end tag. HTML Elements The HTML  element  is everything from the start tag to the end tag: < tagname > Content goes here... < /tagname > Examples of some HTML elements: < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> <br> Paragraph Break  </br> Note:  Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag! Nested HTML Elements HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. The following example contains four HTML elements ( <html> ,  <body> ,  <h1>  and  <p> ): Example <!DOCTYPE html> < html > ...
Read more

HTML RESPONSIVE WEB DESIGN

-
If you're looking for a basic responsive HTML page , here's a simple example that adapts to mobile, tablet, and desktop screens using CSS. <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Responsive Website </title> <style> { margin: 0 ; padding: 0 ; box-sizing: border-box ; font-family: Arial , sans-serif ; } body { background:#f4f4f4; color:#333; } header { background:#0077cc; color:#fff; text-align: center ; padding: 20 px ; } nav { background:#005fa3; display: flex ; justify-content: center ; flex-wrap: wrap ; } nav a { colo...
Read more