Nancyvarkey at 10:18, 18 November 2020

2020-11-18T10:18:39Z

Pravin1389 at 17:32, 13 November 2020

2020-11-13T17:32:22Z

Nehasolanki: Created page with "'''Title of the script: '''Forms in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyword..."

2020-11-11T14:19:15Z

Created page with "'''Title of the script: '''Forms in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyword..."

New page

'''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

{| border="1"
|-
| | '''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

{| style="width: 22em;"
|-
| '''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
| | Next, '''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.

Let us look at them.
|-
| | [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.
|-
|}

@@ Line 113: / Line 113: @@
 |  | Here I have created a simple '''form''' to fetch '''First Name''' from the '''user'''.
-And linked this file to '''style'''.'''css''' stylesheet.
+And linked this file to '''style.css  stylesheet'''.
 |-
 |  | Open MyWebForm.html in firefox
@@ Line 208: / Line 208: @@
 |  | Observe the output.
-Width is set to 60% of the width of '''web''' '''page'''
+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'''.
+|  | Next, using''' Padding '''property we can add some '''space''' around the '''text'''.
 Let us try this.

@@ Line 272: / Line 272: @@
 |-
 |  | Slide: Focus
-|  | Next, '''Focus selector '''is used to '''style''' the '''input field '''when the '''element '''is focused.
+|  | '''Focus selector '''is used to '''style''' the '''input field '''when the '''element '''is focused.
 Let us try this.
@@ Line 437: / Line 437: @@
 This file is available in the '''Code files''' link.
 |-
 |  | [gedit - '''MyForm.html''']

CSS/C3/Forms-in-CSS/English - Revision history

Nancyvarkey at 10:18, 18 November 2020

Pravin1389 at 17:32, 13 November 2020

Nehasolanki: Created page with "'''Title of the script: '''Forms in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyword..."