DEV Community

antony stark
antony stark

Posted on

Form attributes in HTML

#webdev #programming #productivity #beginners

Form:- generally form is used to get information from user for storing the data or some validation purpose

Method attribute:-This attribute specifies the HTTP method to be used when submitting the form data,The default http method used in form method is GET.in method there are three attributes they are

<form action="" method="get">
Enter fullscreen mode Exit fullscreen mode

In method attributes there are three types they are

  1. get
  2. post
  3. dialog

Input attributes:-

Type attributes:-this type of attribute defines what type of input is used in the specified area

  • some of the examples
    Type=button,checkbox,date,datetime-local,email,password,radio,submit,tel,text etc

  • Syntax
    input type ="attribute name"

value attribute:-the input value attribute specifies the initial value for an input field

<input type="text" id="fname" name="fname" value="Antony"><br>
Enter fullscreen mode Exit fullscreen mode

  • read-only attribute:- this attribute is used to read only purpose in the input field

  • disabled attribute:- this attribute is used to specify that this input field is disabled and un-clickable

  • size attribute:-The input size attribute specifies how much characters or numbers were used int the input field ,the default size is 20 and can be used in text,search,tel,password

  • min and max attribute:-The min and max attributes specify the minimum and maximum values for an input field,
    for example it can be used for specify a range

  • placeholder attribute:-this atrribute gives the hint to the user about what kind of information is to give in the field

  • required attribute:- this attribute used to user must fill the field without leaving it wouldn't submit the form

  • name attribute:- this attribute purpose is for referencing the input in the url and used to identify and group data fields within a form ,it acts as a key value pair

Code Area

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
</head>
<body>
    <div>
<h2>College admission</h2>
<form action="./user" method="get"></form>
<fieldset>
  <legend>User Information
<label for="Student-name">Name</label>
<input id="Student-name" placeholder="Enter your name" type="text" required name="Student-name">
<label for="student-email">Email</label>
<input type="text" placeholder="enter the email">
<label for="student-phone">Phone number</label>
<input placeholder="Enter you Phone number" type="tel" name="student-phone">
<label for="address"> Address</label>
<textarea name="address" id="address"></textarea>
<label for="">DOB</label>
<input type="date" name="=DOB">
<label for="">Gender</label>
<label for="">Male</label>
<input type="radio" value="others" name="male">
<label for="">Female</label>
<input type="radio" value="others" name="female">
</fieldset>
<fieldset>
  <legend>Course Details</legend>

  <label for=""> Courses</label>
  <select name="courses" id="courses">
    <option value="Python full stack">Python full stack</option>
    <option value="Java full stack">Java full stack</option>
    <option value=" AI/DS">AI/DS</option>
    <option value=" ui/ux">ui/ux</option>
    <option value="Digital marketing">Digital marketing</option>
  </select>
  <label for="feedback">Feedback</label>
  <textarea name="feedback" id="feedback"></textarea>
  <label for="">Preffered language</label>
  <input type="checkbox" value="" id="tamil" name="Tamil">
  <label for="lang">Tamil</label>
   <input type="checkbox" value="" id="English" name="English">
  <label for="lang">English</label>
   <input type="checkbox" value="" id="tamil" name="Hindi">
  <label for="lang">Hindi</label>
<input type="button" value="Submit" name="submit">

</fieldset>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
merbayerp profile image
Mustafa ERBAY •

Nice introduction for beginners! Covering the common form attributes in one place is really helpful.

One small suggestion though: I’d double-check the sample code before publishing. I noticed a few things like the

tag being closed too early, the submit control using type="button" instead of type="submit", and the radio buttons using different name values, which means they won’t behave as a single group.

The concepts are solid—the example just needs a little polish to match them. 😊