Basic HTML Controls

We start with the simple text controls

HTML controls mean textboxes, radio buttons, checkboxes, listboxes, dropdowns, hidden controls and file controls.

To start with let us define a single line textbox.

This done by  writing


<input type="text"/>

This will display a single line textbox of default size.

To display a given value in the textbox we use the value attribute.


<input type="text" value="Hello"/>

 

The maxlength attribute specifies the maximum number of characters that can be entered in the textbox.

<input type="text" value="Hello" maxlength="6"/>

The total input types are
text, password, radio, checkbox, button, file, hidden, button, reset and submit.

HTML5 attributes are.

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

 

To create a password field you create a


<input type="password"/>

Textarea creates a multiline textbox


<textarea></textarea>

HTML Input attributes are
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

Here is a page that uses all this

<!DOCTYPE html>
<html>
    <head>
        <title>Textboxes</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
<div>
            Single Line <input type="text"/>
            
              Password <input type="password"/>
            
            Multi Line <textarea></textarea>
            
            Radio Button
            <label>  <input type="radio" name="course" value="mca" checked> MCA</label>
            <label> <input type="radio" name="course" value="bca"> BCA</label>
            Checkbox
            <label><input type="checkbox"/>Please check</label>
            
            File
            <input type="file"/>
            
            Buttons
            <input type="button" value="Button"/><input type="reset" value="Reset"/><input type="submit" value="Submit"/>
            
            Color
             <input type="color">
             
            Date
            <input type="date"/>
            
            Date Range
             <input type="date" min="1970-01-16" max="2000-12-31">
             
             Date & Time
            <input type="datetime-local"/>
            
            E Mail
            <input type="email"/>
            
            Month
            <input type="month"/>
            
            Number
            <input type="number" name="quantity" min="-50" max="150" step="10">
            
            Range
            <input type="range" min="10" max="30">
            
            Search <input type='search'/>
            
            Phone
  <input type="tel">
  
  Time
   <input type="time">
   
   URL
   <input type="url">
   
   Week
   <input type="week">
   
   Months
   <select>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
</select>
        </div>

    </body>
</html>

This link connects to the html page

 

Leave a Reply