CSS - Style Forms

CSS - Style Forms

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

Example :

    width: 150px;
    margin-bottom: 10px;
    background-color: red;

Sample Coding :

<!DOCTYPE html>
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: lightblue;
name="input" action="" method="get">
        Website Name:
        <input type="text" name="Name" value="Wikitechy" size="50">

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.