Difference between revisions of "CSS/C3/Forms-in-CSS/English"

• Styling Forms in CSS and
• Customise the input fields as per our requirements

System Requirements

• Ubuntu Linux OS v 18.04
• CSS3
• HTML5
• gedit Text Editor and
• Firefox web browser

However you may use any other editor or browser of your choice.

https://spoken-tutorial.org

If not, please go through the HTML and CSS tutorials on this website.

Please download and extract them.

Make a copy and then use them while practising.

• Using CSS we can style and format forms as per our requirements.

• Input text
• Label
• Select Menu
• Textarea
• Input Buttons

Let us understand these one by one.

The same is available in the Code files link.

<form>

<label for="fname"> First Name </label>

<input type="text" name="fname">

<input type="button" value="Submit">

</form>

<link rel="stylesheet" href="Style.css">

And linked this file to style.css stylesheet.

Now open the file MyWebForm.html in a web browser.

It displays an input textbox to get the First name from the user.

• Border property is used to set the size, type and color for the borders.
• Border-radius property is used to make the corners round.

Open the file Style.css in any text editor.

I have opened it in the gedit text editor.

input[type=text]{

border: 3px solid purple;

border-radius: 10px;}

Now type the code as shown.

Highlight:

input[type=text]

Here I have written the name of the form element first.

Then within the square bracket I have mentioned the type of the element.

border: 3px solid purple;

border-radius: 10px;

To increase the size of roundness I have set the radius to 10 pixels.

The border is set now.

Let us try this.

width: 60%;

Inside the input text tag, next to border-radius property, type the code as shown.

Width is set to 60% of the width of web page

Let us try this.

padding: 10px;

Inside the input text tag, next to width property, type the code as shown.

Highlight the output

Size of the input field has increased because we have set the padding space to 10 pixels.

background-color: lightcyan;

color: blue;

Inside the input text tag, next to padding property, type the code as shown.

Highlight the output

Background color is set to light cyan.

We can see the color of the text is blue.

Let us try this.

input[type=text]:focus {background-color: lightgreen;}

Next to the input text tag, type the code as shown.

Highlight the output

Now click on the input field, and see the background color changes to green.

Now click anywhere outside the input field.

The background color of the input textbox changes to its original color, light cyan.

• background-image property is used to set an image inside the input field.
• Along with this, we can use background-position and background-repeat property

Let us try this.

Type:

background-image:url("index.png");

background-repeat: no-repeat;

Inside the input text tag, next to color property, type the code as shown.

Highlight: "index.png"

Please download and keep it in the folder where you have saved your code files.

Highlight the output

Our selected background image is set in the input field.

To solve this problem, we will use text-indent property.

Type:

text-indent: 50px;

Next to the background-repeat property, type the code as shown.

Type: Spoken

We can see that text does not overlap the image.

• Animation can be done in forms using transition property.
• Transition property is used to change the property values over a given duration.

Let us try this.

transition: width 0.2s ease-in-out;

transition: width 0.2s;

width: 100%;

Type the code as shown.

Highlight the output

Now click on the input field.

The width of the input text box is scaled to 100% of the web page.

Now click anywhere outside the input field,

The width of the input textbox is scaled back to its previous size.

MyForm.html

formstyle.css

In the file browser

I have added some CSS to Style the form in the file formstyle.css.

This file is available in the Code files link.

Highlight the div tags

Open this file in any text editor

Using the div tag, I have formatted the form for better visibility.

class=”column1”

class=”column2”

class=”column3”

Highlight Select section

Highlight Text area

It is used to get a multi-line text input from the user.

Open the file formstyle.css in any text editor.

I have opened it in the gedit text editor.

column 1, column 2, column 3 properties

Then based on my requirement I have set the float, width and top margin values.

Highlight: CSS property for label

Highlight: CSS property for Select menu

Like width, padding, border, border-radius, background-color & color property.

CSS property for input text box , textarea & Button

Now open the file MyForm.html in a web browser.

Point to the textarea boundary

Place the mouse pointer at the bottom right corner of the textarea and drag.

To stop this resizing, we use resize property.

Type: resize: none;

Highlight the page

We see that alignment of this form has not changed.

Note that, this representation of the form is not user friendly for small screen users.

For this, I will create a responsive form using the Media rule.

• Using responsive forms we can make our form compatible for all screen sizes.

• Media rule is used to set some CSS properties if a certain condition is true.

Type:

@media screen and (max-width: 600px) {

.column1, .column2{

width: 100%;} }

Here I have used media rule.

It sets the label, input text, select menu, textarea and input button to 100% width

This happens when the width of the browser window is 600px or smaller.

Highlight the output

This is because the width of all the elements is now set to 100%.

Let us summarize.

• Styling Forms in CSS and
• Customise the input fields as per our requirements

• Create a file loginpage.html.
• Obtain the following details from the user
  • Email Address
  • Password

• Add a select menu to select the gender.
• Add a button as Login

• Create a file webformstyles.css.
• Style all the form elements.
• Link the webformstyles.css file to loginpage.html file.
• Observe the output

Please download and watch it.

For more details, please write to us.

Thank you for watching.