HTML- Hyper Text Markup Language and CSS Cascading Style Sheets

champak
HTML
₹2,000.00 ₹300.00
  • 24 students
  • 7 lessons
  • 2 quizzes
  • 10 week duration

Basic HTML Controls

HTML provides a rich set of input controls for accepting input from the users.

These can be roughly divided into

  1. Single line textboxes.
  2. Multiline textboxes
  3. Selectable controls. These are controls that do not allow the facility to enter new data. The user can only select from a given set of options. We have select tags, radio buttons and checkboxes.

 

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 Textboxes

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>

HTML Select Tag

 

This link connects to the html page

 

Leave a Reply

Your email address will not be published. Required fields are marked *