Skip to main content

Recent Posts

Latest News

● Posts on CSS and SEO coming soon ...●

Forms in HTML (Input Element)

 

Using The <Input> tag in HTML:-

 This tag is used to create a input or text field. It allows user to fill data in given field. The <Input> tag with the help of attributes gives different types of input fields. This tag has no end. The default value for input type is text.

 Syntax of input tag is

<input attribute=”value”> 

Attributes of <Input>:

1.  Type: It describes, the name of the control like text, radio etc. Following are examples of input type value

     <Input type = "text">:- This creates a one line textbox

          <Input type = "radio">: This creates a radio button. The radio button allows one option selection from multiple choices.

         <Input type = "checkbox">: This creates a checkbox. It allows more than one selection from multiple choices.

          <Input type = "submit">: This creates a button for submitting the form data to a server.

           <Input type = "password">: This creates a text field which is displayed in asterisk (*)

           <Input type = "reset">: This creates a button for deleting all data filled in form.

           <Input type = "button">: It displays push button which activates on events or a function.

 

2.         Name: This attribute assign name to the textbox. The name attribute is a user defined value. If the name attribute is not specified, the data of that input field will not get submitted.

3.        Maxlength: This attribute is used for specifying the maximum number of characters which can be entered in a text or password box.

4.          Size: The 'Size' attribute can be used with text and password type. It specifies the width of the text box.

5.       Checked: The 'Checked' attribute specifies the default selection for options in a checkbox or radio button.

6.          Value: This attribute specifies default value in a text box.

HTML5 introduces some new input types:

  <input type="color">: Defines a color picker

  <input type="number">: Defines a field for entering a number

  <input type="url">: Defines a field for entering a URL.

  <input type="image">: Defines an image as a submit button.

  <input type="date">: Defines a date picker with the year, month and day

  <input type="email">: Defines a field for an e-mail address

  <input type="month">: Defines a month and year control in format is "YYYY-MM"

   <input type="range">: Define a range control. Default range is 0 to 100.

   <input type="datetime-local">: Defines a date picker that includes the year, month, day and time.

   <input type="time">: Defines a control for entering a time.

   <input type="week">: Defines a week and year control.

   <input type="search">: Defines a text field for entering a search string like a site search or Google search.

   <input type="file">: Defines a file-select field and a "Browse" button for file uploads.

   <input type="tel">: Used for defining input fields that should contain a telephone number

 

Input Restrictions in HTML

disabled: Specifies that an input field should be disabled.

max: Specifies the maximum value for an input field.

min: Specifies the minimum value for an input field.

pattern: Specifies a regular expression to check the input values.

read only: Specifies that an input field is read only (cannot be changed).

placeholder: This acts as a temporary label showing the purpose of a text field without requiring a label tag.

required: Specifies that an input field is required (must be filled out).

autocomplete: Specifies whether a form or input field should have autocomplete On or Off.

autofocus: Specifies that the input field should automatically get focus when the page loads.

height and width: Specifies the height and width of an <input type="image">

multiple:  Specifies that the user is allowed to enter more than one value in the textbox.



 

 

other attributes of input tag are id and class

  Common Question in this topic

How to learn all input attributes?

 It is not necessary to learn all this input types, all you need is to remember some basic input types as i had used in given code.  )

Comments

Top Posts

Basics of Web

 How Website Works?:  When a client search a particular website on internet, his request is sends to DNS for obtaining IP Address. This IP Address is send to the client-server. Clients server requests the web-server for sending files to the client in terms of HTML, CSS and Javascript to the location of clients IP Address. Finally client views content in his browser which he had requested.  Let us now define some common terms in Web Development which are required to understand before moving forward in web development. Web page is a document or information resource on www (world wide web) and can be accessed through web browser and displayed on a monitor. Web publishing describes the software and methodologies to design web pages and website. Web Server is a Computer which stores websites or A Web server is an application or a computer that sends webpages over the internet using the HTTP protocol. The functionality of website is managed by web server. Web Browser is a sof...

HTML Paragraphs and Responsive

  How Paragraph Tags used in HTML? :-  Paragraph tags are used to group sentences in the one paragraph.  It is denoted by <p> tag. It is a container tag i.e. it has start and end tag. It contains a content. It is a block level element (always start on new line and creates its horizontal block). Paragraph tags also have attribute style, used to design text inside this tags.              Output is :-     HTML Responsive :-       To make webpage responsive (adjust size according to device screen) following code is used in head tag. It is important for any webpage to display properly according to device width.

Introduction to HTML

  WHAT IS HTML AND WHY IT IS USED :  HTML stands for Hypertext Markup Language. HTML forms a basic structure for any websites. HTML is standard language used for creating a website. It is necessary for anyone who want to build a website. HTML file has a extension .html. HTML file can be created in any text editor and executed in web browser. HTML5 is current major version of HTML Basic structure of HTML file given bellow: HTML tags are element names enclosed with angular brackets. Tags are not case sensitive. HTML page is enclosed within <html></html> tag. HTML page mainly contains following syntax. Html elements mainly contains  opening tags, content and closing tags. HTML tags are of two types : • Container tags : tags which have opening and closing tags are called Container tags. This tags contains content. This tag can also contain other tags.  Eg. <body></body> • Empty tags : tags which don’t have end closing tags are called Empty ...

Text Formatting in HTML

  What are the Text Formatting Elements in HTML  : Text formatting elements are used to make beautiful or to design the HTML document. (This tags are used to made attractive webpages but not recommended because CSS is used for the purpose of styling webpage rather than using text formatting tags). Following are some Text Formatting Elements: Let's understand each and every text formatting elements through HTML code :-  For now just ignore </br> tag in the code.