CSS/C3/Forms-in-CSS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of the script: Forms in CSS

Author: Neha Solanki

Domain Reviewer: Ankita Maske, Om Prakash Soni

Novice Reviewer: Madhuri Ganapathi

Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Forms, CSS Forms Border, CSS Forms Width, CSS Forms Padding, CSS Forms Color, CSS Forms Focus, CSS Forms Image, CSS Forms Animation, CSS Forms Label, Media rule, CSS Forms Select Menu, CSS Forms Textarea, CSS Forms Input Buttons, CSS Responsive Form

Visual Cue Narration
Slide: Title Welcome to the spoken tutorial on “Forms in CSS”
Slide: Learning Objectives In this tutorial we will learn about:
  • Styling Forms in CSS and
  • Customise the input fields as per our requirements
Slide:

System Requirements

This tutorial is recorded using,
  • 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.

Slide: Prerequisite

https://spoken-tutorial.org

To practise this tutorial, you should know to use HTML and CSS.

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

Slide: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.

Slide: Forms
  • Using CSS we can style and format forms as per our requirements.
Slide: Forms
Border Width
Padding Color
Focus Image
Animation
These are some CSS properties used for forms:
Slide: Forms We will learn how to design:
  • Input text
  • Label
  • Select Menu
  • Textarea
  • Input Buttons
Slide: Forms We will also learn how to create a Responsive Form.

Let us understand these one by one.

Open my-css folder Go to the practice folder my-css.
Narration For this demonstration I have created a Registration form and saved it as MyWebForm.html

The same is available in the Code files link.

[gedit - MyWebForm.html] Open the file MyWebForm.html in any text editor.
[gedit - MyWebForm.html] Highlight:

<form>

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

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

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

</form>


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

Here I have created a simple form to fetch First Name from the user.

And linked this file to style.css stylesheet.

Open MyWebForm.html in firefox Switch to the my-css folder.

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

[Firefox] Highlight the output Observe the output.

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

Narration Let us apply CSS properties to this form.
Slide: Border
  • 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 Style.css in gedit Switch to the my-css folder.

Open the file Style.css in any text editor.

I have opened it in the gedit text editor.

[gedit - Style.css] Type:

input[type=text]{

border: 3px solid purple;

border-radius: 10px;}

Now type the code as shown.

[gedit - Style.css]

Highlight:

input[type=text]

The way to define the CSS property for a form is different from other elements.

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

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

[gedit - Style.css] Highlight:

border: 3px solid purple;

border-radius: 10px;

I have set the border size to 3 pixels, border type to solid and border color to purple.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page
[Firefox] Highlight the output Observe the output.

The border is set now.

Only narration Next, using CSS width property we can set width of the form elements.

Let us try this.

Switch to Style.css Switch to the Style.css file.
[gedit - Style.css] Type:

width: 60%;

I will set the width of the input field to 60% of the web page.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Highlight the output Observe the output.

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

Only narration Next, using Padding property we can add some space around the text.

Let us try this.

Switch to Style.css Switch to the Style.css file.
[gedit - Style.css] Type:

padding: 10px;

I will set the padding to 10 pixels.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

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

Only narration Using CSS color property we can set colors to the forms, as well.
Switch to Style.css Switch to the Style.css file.
[gedit - Style.css] Type:

background-color: lightcyan;

color: blue;

I will set the background color to light cyan and the color of the text to blue.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Background color is set to light cyan.

[Firefox] Type: Spoken Now type some text in the input field for testing purposes.

We can see the color of the text is blue.

Slide: Focus Focus selector is used to style the input field when the element is focused.

Let us try this.

Switch to Style.css Switch to the Style.css file.
[gedit - Style.css] Type:

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

I will set the background color to green when the input text box is focused.


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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe 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.

Slide: Image
  • 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.

Switch to Style.css Switch to the Style.css file.
[gedit - Style.css]

Type:

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

background-repeat: no-repeat;

I will set a background image with no repeat property.

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

[gedit - Style.css]

Highlight: "index.png"

This image is available in the Code Files link on this tutorial page.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Our selected background image is set in the input field.

Only narration We see that the text overlaps the image.

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

Switch to Style.css Switch to the Style.css file.
[gedit - Style.css]

Type:

text-indent: 50px;

I will set the text indentation to 50 pixels.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Highlight the output

Type: Spoken

Observe the output.

We can see that text does not overlap the image.

Slide: Animation
  • 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.

Switch to Style.css Switch to the Style.css file.
[gedit - Style.css] Type:

transition: width 0.2s ease-in-out;

Inside the input text tag, next to the text indent property, type the code as shown.
[gedit - Style.css] Highlight

transition: width 0.2s;

Here the transition property is set for width with a duration of 0.2 seconds
[gedit - Style.css] Type:

width: 100%;

Inside the input focus tag, next to the background color property,

Type the code as shown.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe 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.

Switch to my-css folder Switch to the my-css folder.
Point to the files

MyForm.html

formstyle.css

In the file browser

Likewise I have formatted some more form attributes in the file MyForm.html.

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

This file is available in the Code files link.

[gedit - MyForm.html]

Highlight the div tags

First we will see the HTML code.

Open this file in any text editor

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

[gedit - MyForm.html] Highlight

class=”column1”

class=”column2”

class=”column3”

Inside the div tag, I have declared the CSS class named column1, column2 and column3.
[gedit - MyForm.html]

Highlight Select section

Then I have included the select menu to select the country.
[gedit - MyForm.html]

Highlight Text area

I have also included a text area to get the information about the user.

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

[gedit - formstyle.css] Now we will have a look at the CSS file.
Open formstyle.css in gedit Switch to the my-css folder.

Open the file formstyle.css in any text editor.

I have opened it in the gedit text editor.

[gedit - formstyle.css] Highlight

column 1, column 2, column 3 properties

Here I have defined all the classes column1, column2 and column3.

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

[gedit - formstyle.css]

Highlight: CSS property for label

For the label property, I have set the font weight to bold and padding to 8 pixels.
[gedit - formstyle.css]

Highlight: CSS property for Select menu

For the Select menu, I have set some properties.

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

[gedit - formstyle.css] Highlight:

CSS property for input text box , textarea & Button

Lastly I have also set some property for the input text box , textarea and button.
Open MyForm.html in firefox Switch to the my-css folder.

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

[Firefox] Observe the output.
[Firefox]

Point to the textarea boundary

Let us resize the text area.

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

To stop this resizing, we use resize property.

Switch to formstyle.css Switch to the formstyle.css file.
[gedit - formstyle.css]

Type: resize: none;

Inside the textarea tag, next to color property, type the code as shown.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Highlight the output Observe that we cannot resize the textarea anymore.
[Firefox]

Highlight the page

Now resize the browser width to 600px or smaller.

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.

Only narration So I will make it user friendly for small screen devices.

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

Slide: Responsive Forms
  • Using responsive forms we can make our form compatible for all screen sizes.
Slide: Media rule
  • Media rule is used to set some CSS properties if a certain condition is true.
Switch to Style.css Switch to the Style.css file.
[gedit formstyle.css]

Type:

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

.column1, .column2{

width: 100%;} }

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

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.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

The label, input text, select menu, textarea and input button stack on top of each other.

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

Only narration With this we have come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Styling Forms in CSS and
  • Customise the input fields as per our requirements
Slide: Assignment As an assignment
  • Create a file loginpage.html.
  • Obtain the following details from the user
    • Email Address
    • Password
Slide: Assignment
  • Add a select menu to select the gender.
  • Add a button as Login
Slide: Assignment
  • Create a file webformstyles.css.
  • Style all the form elements.
  • Link the webformstyles.css file to loginpage.html file.
  • Observe the output
Slide: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forums Please post your timed queries on this forum.
Slide: Acknowledgement Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
Slide: Thanks This is Neha Solanki from IIT Bombay.

Thank you for watching.

Contributors and Content Editors

Nancyvarkey, Nehasolanki, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C3/Forms-in-CSS/English&oldid=54436"