(IX) Ch-11 Form and Cascading Style Sheet

1. Fill in the blanks. (a) Data in form can be filled using text fields, checkbox , radio buttons. (b) Password input box displays bullets in the place of characters. (c) One of the common fields or HTML form is the text input field that allows to input small piece of text. (d) Radio buttons are groups of small round buttons that allow a user to choose one option in a group. (e) There are three ways to use styles sheet, which are inline, internal and external style sheet. 2. State whether the following statements are true or false. (a) Textarea tag is used to input large peices of text which is up to 1024 characters. True (b) Once CSS is defined , it cna be used onlu in single HTML page. False (c) Border-style, border-color,border-width are attributes of border tag. True (d) An external style sheet is a separate file where we can declare all the styles and saved as a file with an extension dot css. True (e) CSS supports a number of measurements including absolute units such as inches, centimeters, points. True 3. Write down the syntax and purpose of the following: (a) Form Tag: Syntax of Form Tag: <form> elements of form ................. ................ </form> Purpose of Form Tag: Forms can be used to enter data. (b) Textarea element: Syntax of textarea element <textarea name="name of field" cols="number of columns" rows="number of rows"> </textarea> Purpose of Textarea element: Textarea element can accept textual input of up to 1024 chracters and uses multi line of text. (c) Password element: Syntax of Password element: <input type="password" name="password" size="size of field" maxlength="maximum character allowed"> Purpose of password element: Password element is used for security purposes, in which the characters types in are invisible or replaced by symbols such as "*". (d) Link Tag: Syntax of Link Tag: <style> a:link{color:color_name;} </style> Purpose of Link Tag: Link tag is used to provide the connection from one web page to another web pages. (e) Style element Syntax of style element: <style> ............. ............. </style> Purpose of style element Style tag is used to define the properties/attributes for the HTML tag (f) Submit Button: Syntax of Submit Button: <input type="submit" value="Send data" > Purpose of submit Button Submit button is used to tell the browser to take action on the form that sends data to the server that requires scripts. 4. Fill the following tables using the given CSS code: p{font-size:14pts; font-style:italic;background-color:gold;}
Selector p
Property font-size; font-style;background-color
Value 14pts; italic;gold
5. Write CSS code for the following features: font name=Arial font-size=20pts font-style=italic font-weigth=bold background-color=red margin-left=10% margin-right=15% Answer: p{ font-family: Arial; font-size:20pts; font-style:italic; font-weigth:bold; background-color:red; margin-left:10%; margin-right:15%; } 6. Answer the following questions in short: (a) What is text input element of form? Answer: Text input field allows to input small piece of text such as names, addresses etc. (b) What is the maximum number of characters can be input using textarea input element of form? Answer: 1024 Characters (c) What is checkbox element? Answer: Check box allows user to select multiple options from list. (d) Give examples of relative measurement units. Answer: Percentages and em units are examples of relative measurement units. (e) What is internal style sheet? Answer: The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag. 7. Answer the following questions: (a) What is form? Write names of elements of form. Answer: The HTML form element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. Elements of form are : text fields, checkboxes, radio buttons, submit buttons, etc. (b) Explain radio button element and check box element of form. Answer: Radio buttons are groups of small round buttons that allow a user to choose one option in a group. Syntax of Radio Button: <input type="radio" name="group-name" value="value-if-selected"> Options Check box allows user to select multiple options from list. Syntax of checkbox: <input type="checkbox" name="field-name" value="value-if-selected">Options (c) What is links? Write the four different states of it. Answer: Links is a connection from one web page to another web pages. CSS property can be used to style the links in various ways. There are four different states of a link supported by CSS are : (1) a:link- a normal, unvisited link (2) a:visited- a link the user has visited. (3) a:hover- a link when the user mouse over it. (4) a: active- a link the moment it is clicked. (d) Write different attributes of margin. Answer: Four attributes of margin are: (1) margin-top (2) margin-bottom (3) margin-left (4) margin-right (e) What is CSS? Write any two advantages of it. Answer: A technique to design a web page presentable in much more interactive and user friendly way is called CSS(Cascading Style Sheet). It is a powerful mechanism for adding styles such as fonts, colors, border, background etc. Two advantages of CSS are: (i) It reduces HTML codes. (ii) It can be defined once and it can be used in multiple HTML pages. (f) Explain internal style sheet and external style sheet. Answer: Internal CSS Internal or embedded CSS requires you to add <style> tag in the <head> section of your HTML document. This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website. External CSS With external CSS, you’ll link your web pages to an external .css file, which can be created by any text editor in your device (e.g., Notepad++). This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, you can change your entire site at once. (g) What is CSS syntax? Explain with an example. Answer: A CSS rule consists of a selector and a declaration block is called CSS syntax. CSS Syntax: selector {property1:value;property2:value;...........} Example: h1{color:red;font-size:18pt;}