CSS - CSS Style Forms




 CSS Style Forms

Learn css - css tutorial - CSS Style Forms - css examples - css programs

CSS Style Forms - Definition and Usage

  • In css form have different types of input fields, like text fields, checkboxes, radio buttons, submit buttons, and more.
  • Form styles are used to defines the styles for inputs like user input field, bordered inputs ,colored inputs etc…,
  • Using attribute selector, you can style the specific input type.
Css Form style
  • The attribute selector is used for styling forms without class or ID.

css code - Example

input[type="text"] 
{
    width: 150px;
    margin-bottom: 10px;
    background-color: red;
}
click below button to copy the code. By - css tutorial - team

HTML code - HTML and CSS

 Tryit<!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>
click below button to copy the code. By - css tutorial - team

Code Explanation - Stylesheet css

Code Explanation CSS Style Forms
  1. 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.
  2. Here, widthproperty is used to set the width of the box.
  3. margin-bottom:10px creates the space for the text from the bottom margin of the form box.
  4. background-color:red property sets the background color as red .
  5. In html, form tag is used to create a form to insert a data of into the database.
  6. 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”.

html stylesheet - output :

Output CSS Style Forms
  1. Website Name: is the label text.
  2. 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.

This page provides a detailed information on css menu tutorial , css for website , css programming language , css resources , css3 code , style sheets css , homepage css , html css test , html css javascript online , online css , css cascading style sheets , css to html , edit css , css cascading , online css validator , css5 tutorial , css validator online , css tut , create css , css and javascript.


View More Quick Examples

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to css style forms

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×