CSS - Style Forms


CSS - Style Forms

  • The attribute selector is used for styling forms without class or ID.

Example :

input[type="text"] 
{
    width: 150px;
    margin-bottom: 10px;
    background-color: red;
}

Sample Coding :

<!DOCTYPE html>
<html>
<head>
    <style
>
    input[type=text]
    {
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <form
name="input" action="" method="get">
        Website Name:
        <input type="text" name="Name" value="Wikitechy" size="50">
    </form>
</body>
</html>

Code Explanation :


    Input [type="text"] is a style. (i.e) type is attribute and text is a value. Input tag is used in html to create a text box in forms.

    Here, width property is used to set the width of the box.

    margin-bottom:10px creates the space for the text from the bottom margin of the form box.

    background-color:red property sets the background color as red .

    In html, form tag is used to create a form to insert a data of into the database. 

    Website Name: is the label name, input type=”text” states the type of input element to be displayed as text. We assigned the default value inside the box as “wikitechy”.

Output :


    Website Name: is the label text.

    The input text “Wikitechy” will appear in form textbox with a background color red, having 10pixels space from the bottom margin and width of the text box is 150 pixels as displayed in the browser window.