What Are The Basic HTML Form Controls

Introduction

HTML has a rich set of controls to create forms like a registration page, sign-up page, etc. That means those controls are used in the HTML form page, called HTML form controls. Here controls mean handling the HTML form tags that should be used for creating a responsive form page.

What is HTML

HTML, which stands for Hyper Text Markup Language, is a language used for creating web pages. Hypertext refers to text that is underlined and linked to another page, also known as hypertext. It's important to note that HTML is a markup language, not a programming language. A markup language uses tags to define elements within a document, making it easily readable by humans. When creating a web page, the home page is typically saved as "index.html".

Structure of HTML

HTML stands for Hypertext Markup Language and is used to create web pages. HTML documents are structured using a series of tags, which define the structure and content of the page.

An HTML document begins with a DOCTYPE declaration, which tells the browser which version of HTML the document is written in. This is followed by the HTML tag, which contains two main sections: the head and the body.

The head section contains information about the document, such as the title of the page, links to external stylesheets and scripts, and meta information about the page. The body section contains the actual content of the page, such as text, images, and other media.

Inside the head section, you can include various meta tags that provide additional information about the page, such as the character encoding, author, and description.

Here is an example of the basic structure of an HTML document:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
</body>
</html>

In this example, the DOCTYPE declaration is <!DOCTYPE html>, which tells the browser that the document is written in HTML5. The HTML tag contains the head and body sections. The head section contains a title tag, which sets the title of the page to "Page Title". The body section contains an h1 tag, which creates a heading, and a p tag, which creates a paragraph of text.

Basic overview of HTML

This HTML structure is mandatory for executing any HTML web page. All HTML tags are written in-between angle braces. If any HTML Tag is opened then you close the tag mandatory. The HTML code is divided into two parts first one is the head part another is the body part. All file links or CSS pages are added in a head section and the body part or a display part contains all body contents displayed on a web page.

What is CSS

CSS is referred to as Cascading Style Sheets that are used for designing web pages, to change the background color, font size, border, etc. CSS for describing the presentation of Web pages. CSS and HTML both are independent of markup language. The separation of HTML from CSS makes it easier to maintain web pages, and all HTML tags are called with the name of the tag directly but CSS is a sense for designing with class name or id name class is a set of the entity which defines the behavior of tags and id is unique, in a CSS all classes are accessible with using the dot operator(.) and all id are accessible with the has operator(#). All CSS files are saved .css extension; the main CSS file is saved with the name style.css.

Form Tag

The form tag should be used for creating a form. The form like login, sign-up, registration, etc. if you are maintaining a user record that’s why creating a form for collecting user information for maintaining records.

<form>   //use for open tag
</form> // use for close tag

Form Tag Attribute

The form tag has many attributes like"

Name

The name attribute defines the form name.

Action

The action attribute is used to call the function and the backend script is ready to process your passed data.

Method

The method attribute specifies the method which one is used there are two methods available in any OOP language first one is Post and another one is Get. The post method is used to store details in a database and the Get method is used for fetching the user details on a web page.

Enctype

The encrypt attribute is used to maintain security because users can submit or upload a document and do not fetch the document from a third party.

mutlipart/form-data

The multipart or form-data attribute is used for uploading an image, files, etc.

HTML Forms Controls

Text Input Controls

It is used to get the user's single-line input in the form record. Text input controls have many attributes like type, name, value, size, placeholder, and maxlength.

<input type="text" name="username" placeholder="Username" required>

Multiline text input controls

It is used to get the user’s multi-line input in the form record. Generally, it is used for collecting any message. Text input controls have many attributes like type, name, value, size, placeholder, and maxlength required.

 <textarea>Message</textarea>

All Text input controls have attributes like

Type

It is to define the type of input like text, email, password, number, etc.

Name

It is to define the name of the attribute for the calling in a backend method.

Placeholder

The placeholder attribute contains text or information to show for user help for entering the user input format.

Value

The value attribute is defined as static values or those values you are entered for users or displayed on the web page.

Checkbox Controls

Checkbox controls are used when more than one option is required to be selected. It is used to select options from the user input in the form record. The checkbox controls have one extra attribute of the text input controls. Checked the checked controls are checking which value is selected by the user.

<input type="checkbox" name="C#"/>

Radio button Controls

It uses user input to select which one is correct.

<input type="radio" name=""/>

Select Box Controls

It is used to choose one option from the drop-down. A select box also called a drop-down box which provides an option to list various options in the form of a drop-down list, from where a user can select one or more options.

<select>
  <option>Choose an Option</option>
  <option>Option-1</option>
  <option>Option-2</option>
  <option>Option-3</option>
  <option>Option-4</option>
  <option>Option-5</option>
</select>

File Select boxes

It is used to upload a file or image on a web page.

<input type="file" name=""/>

Hidden Controls

Hidden form controls are used to hide data inside the web page.

<input type="hidden" name=""/>

Clickable Buttons

It is used to generate any event by clicking a button.

<button type="click" onclick="fun();"></button>

Submit Button

The submit button is used for submitting a user input into a server.

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

Reset Button

The reset button is used to clear displayed users' data on the web.

<button type="reset">Reset</button>

For example, all HTML form controls tags here

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML Forms Controls</title>
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
	<div class="htmlcontrol">
	<form>
        <label>Text input control</label><br>
         <input type = "text" name = "pagename" placeholder="Text Input" /><br>
         <label>Text input control with password attribute</label><br>
         <input type = "password" name = "pagename" placeholder="password" /><br>
         <label>Text input control with number attribute</label><br>
         <input type = "numbers" name = "pagename" placeholder="Number" /><br>
         <label>Text input control with email attribute</label><br>
         <input type = "email" name = "pagename" placeholder="Email" /><br>
         <label>Multiline Text input control</label><br>
         <textarea>Message</textarea><br>

          <label>Check box Controls</label><br>
          <label>C#</label><input type="checkbox" name="C#"/><br>

          <label>Full Stack</label> <input type = "checkbox" name="full stack" /><br>
          <label>radio button Controls</label><br>
         	<label>Male</label><input type="radio" name="male" /><br>
         	<label>Female</label><input type = "radio" name="female" /><br>
           	<label>Select Controls</label><br>
         	<select>
         		<option>Choose an Option</option>
         	<option>BCA</option>
         	<option>MCA</option>
         	<option>B.Tech</option>
         	<option>M.Tech</option>
         	</select><br>
         	<button type="click" onclick="fun();">Click</button>
            <input type = "file"/><br>
         	<button type="submit">Submit</button>   <button type="reset">Reset</button>
      </form>
	</div>
</body>
</html>

*{
	padding: 0;
	margin: 0;
	font-family: 'poppins',sans-serif;
	box-sizing: border-box;
	margin: 4px;
}


.htmlcontrol{
	margin-left: 400px;
	border: 3px solid #3ec043;
	height: 650px;
	width: 40%;
}
.htmlcontrol label{
	margin-left: 30px;
	font-size: 20px;
	font-family: monospace;
}
input, select, textarea{
	margin-left: 40px;
	padding: 6px;
	width: 50%;
}
button{
	margin-left: 40px;
	padding: 4px;
	width: 30%;
}

Output

Conclusion

HTML form controls have common attributes like type, name, value, placeholder, etc.

HTML form controls have no close tags are not required.