Scribd
Upload
13 views42 pages

Css Chapter 3

Css notes

Uploaded by

aditidhotre2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
13 views42 pages

Css Chapter 3

Css notes

Uploaded by

aditidhotre2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 42
Te ee ¢ Form and Event Handling CHAPTER 3 Syllabus | eee | 3.1 Building blocks of a Form, properties and methods of form, button, | | text, text area, checkbox, radio button, select element | 3.2 Form events — mouse event, key events | | 3.3 Form objects and elements | | 3.4 Changing attribute value dynamically 3.5 Changing option list dynamically 3.6 Evaluating checkbox selection 3.7 Changing a label dynamically 3.8 Manipulating form elements 3.9 Intrinsic JavaScript functions, disabling elements, read only elements. 1 3.1 BUILDING BLOCKS OF A FORM, PROPERTIES AND METHODS OF FORM, BUTTON, TEXT, TEXT AREA, CHECKBOX, RADIO BUTTON, SELECT ELEMENT % 3.1.1 Building Blocks of a Form Form object represents an HTML form.4 (Form and Event Handling) Pano (3, ing Lange © The
tag is used to add HTML forms to the web page for \,,, input. Forms are used to pass the data submitted by the user tc, the server © It is used to collect user input through elements like text fields, che, box and radio button, select option, text area, submit buttons and etc Syntax
..
The Element * The HTML element is the most used form element. * An element can be displayed in many ways, depending on the type attribute. | ‘Type ae Description Displays a single-line text input field Displays a radio button (for selecting one of many choices) +t | Displays a checkbox (for selecting zero or | i more of many choices) Displays a submit button (for submitting the form) — — Displays a clickable button The
element contains other HTML tags, which define the inp! method of data |. The

Output DD teat > GC tie | dytectNeowenPubseations/form2 nen! | | * Button object represents a clickable button in an HTML form. | e It is used to activate a JavaScript when a user clicks on it. | « In JavaScript, we can create button using element or (New Syll. w.e.f academic year 19-20) (D5-16A) Ral tech-Neo Publications—_— UU Client Side Properties Scripting Language (MSBTE) Value autofocus. disabled (Form and Event Handling) Pg. no_(3-7) Description A button getting focus when the | page loads oe Disable a button | form form_id One or more forms the button | | belongs to - | formaction URL For type="submit". Where to | send the form-data when a form | | is submitted. r | formenctype application/x-www- | For type="submit". How form- form-urlencoded data should be encoded before | multipart/form-data | sending it to a server. text/plain formmethod get For type="submit". How to send post the form-data " formnovalidate | formnovalidate For type="submit". The form- data should not be validated on submission. formtarget _blank For type="submit". Where to _self display the response after _parent submitting the form. —top framename | name name Specifies a name for the button | type button Specifies the type of button | reset _ submit value text Specifies an initial value for the button (New Syll, w.e.f academic year 19-20) (D5-16A) "a Tech-Neo Publications.Client Side s : . . | MSBTE) (Form and Event Handling) Pp; co 4) Example Rutton Example <hedy> <form name> <hutton name value="OK" type onclic k="hellof)">Chicy Here « Yorm> Seonpt > function hellog { alert(“Hello JavaScript"); } </hutton></form></hedy>

Output (Before Click) TD Button Example De x > © Fie echeoR20R okcate nto Mind ‘Thi page says Hebe tassrgt Reset Object (Reset Button) * Reset object represents a reset button in an HTML form. New Syll wef academic year 19-20) (D5-16A) [al rech-neo Publications achent Side Scripting Language (MSBTE) (Form and Event Handling) Pg. no. (3-9) When clicking on a reset button, it resets all the controls within the form to their default values. Syntax input ype= “reset” > submit Object (Submit Button) + — Submit object represents a submit button in an HTML form. « It sends the user input in the form to the server. « When clicking on a submit button, it fires on Submit event. Syntax wa 3.1.4 Text Object entax ‘and example. k Text object represents a single-line text input field in an HTML form. User can provide input by entering single line text into text field. Syntax:

Textfield Example

Slit > \New Syl. wef academic year 19-20) (D5-16A) UB rech-nveo Publications —_—e |ng Language (MSBTE) (Form and Event Handling) Pg. no, a Output i Fa Cy tereres Extn x oe I | ~ eo DyTechNeo%z0Pub Jications/textarea htm} € \ | Address | [examinareyan Temede, iis Click Ma | | Syanmmarayan Temple, Pune | toeeeee e — Check box object represents a checkbox in an HTML form. © It allows the user to select one or more options from the availabj, choices. Syntax Properties Property 2 Deseription a Name | It sets or returns the name of the checkbox. | | Type Tt returns the value “check”. | Value Tt sets or returns the value of the attribute of a checkbox. | | Checked It sets or returns the checked state of a checkbox. | defaultChecked | It returns the default value of the checked attribute. Methods Method _ click() It sets the checked property. Example

Checkbox Example

Click the button to create a Checkbox

(New Syll. w.e f academic year 19-20) (D5-16A) [al tech-Neo Publicatio™rn eee a a a eee Reh eet client Side Scripting Language (MSBTE) (Form and Event Handling) Pg. 10. (3-13) fanetion myFunc ction?) { ap 2 = dooument-c reateElement("input’); saaateibae "type", “checkbox"); checked = true; document body.appendChild(x); } Output TD Checkbox Example x + G Ofte | Click the button to create a Checkbox D:/TechNeo%20Publications/checkbox1.htm! aaa % 3.1.7 Radio Button Object 1 1 GQ Write the * Radio object represents a radio button in an HTML form. * — It allows the user to select only one option from the available choices. Syntax . Properties ert 4 Description Property : P' "Checked It sets or returns the checked state of a radio button, defautChecked It returns the default value of the checked attribute. Name It sets or returns the value of the name attribute of a radio button. | Type 1 Ireturns | the type of element, whi al radio button. 4 ts or returns the value of the radio button i ‘€w Syll. wef academic year 19-20) (D5-16A) [el rech-teo Publications, “Client Side Scripting Language (MSBTE) (Form and Event Handling) Pg. ne, 0 ee ee ae aneneannentatieta 14 present only vegetable names to the user. Methods Method * Daberlpeion | blur ) | It takes the focus away from the radio button. le click) + Tt acts as if the user clicked the button. | focus() _ [te gives the focus to the radio button. Example tates eae al caesar ae Sis EE ' UQ. Write a HTML script, which displays two radio buttons to the user, ' ' for fruits and vegetables and one option list. When user select fruits | : radio button option list should present only fruits names to the use, ; ‘ & when user select vegetable radio button Peso list shouig | 1 ' 1 with(document.forms.myfoi L) if(ElementValue = { ‘ optionList{O].text="Mango"; optionList{O).value=1;- 0” optionList[] ].text= "Banana"; optionList{1].valu optionList(2] text= option| ist[2].value=3: : (New Syll. w.e.f academic year 19-20) (D5-16A) Tech-Neo Publication>Form and Event Handling) Pg. no. (3-15) Client Side Scripting Language (MSBTE) ( jf(ElementValue == 2) { optionList{0}.text="Potato’s optionLi at{O].valie= ly aptionLiat[1].text="Cabbage’s optionList[1} value= Ss aptionList{2].text="Onion’: optionList{2].value=3; yt ©
—

(New Syl. w.e.f academic year 19-20) (D5-16A) & Tech-Neo Publications.a. \ Fruits ® Vegetables i Reset WW 3.1.8 Select Element and Option Element Vee Ow ee SOR ee * Select object represents a dropdown list in an HTML form. * A dropdown list is a toggleable menu that allows the user to choose one option from multiple ones. Add the multiple attribute to the element, which reflects the index of the selected ee (New Syll. wef academic year 19-20) (D5-16A) Bi! Tech-Neo Publicatio"®pting Language (MSBTE) me de Scri (Form and Event Handling) Pg Collections — ae anaes Eee cottection | Description options properties eoeasemeet property _| a _Deseription E a I returns the humber of oj tions in a dro down list. | jength ce E ——— cclectedindex | It sets or returns the index of the selected option in a | | dropdown list. al Sees awiltiple It returns true if the element. The value property of

List of Fruits: Saclect name= “fryit' > a i eesenatiatriet Seneca . (New Syll. w.ef academic year 19-20) (D5-16A) Tech-Neo Publication a> client Side Scripting Language (MSBTE) (Form and Event Handling) Pg. no. (3-19) option yalue="0">Select a Fruit
option value=" Mango" > Mango 3 Banana" > Banana

Output (Before Select) [ exeane oe OB cption3.htmni x G © Fite | DytechNeo%20Publications/option3,html List of Frit: (gple ——¥) [ Sea] (After Select) @ DB option’s.htmt Co © Fite | D:/TechNeo%20Publications/option3.html Your Favorite Fruit is Apple. 4 3.2 FORM EVENTS - MOUSE EVENT, KEY EVENTS C2502 ee meen 1 GQ. What is an Event? : ' SQ. Enlist different type of mouse events, ! B Enlist different type of keyboard events. The Change in the state of an object is known as an Event. ‘New 5 Il. wef academic year 19-20) (D5-16A) Blrech-neo Publications. “~ > y JavaScript Mouse Events ; u |
f function click event() { alert("This is a JavaScript Mouse Event"); SIseript> “html > (Ne &W Syll. wef academic year 19-20) (D5-16A) fl Tech-Neo Publications. ~~Client Side Scripting Language (MSBTE Form and Event Handling) Po. a, ——— Output (Before Click) fee Om Mouse Events x + =. | G ©) File | DyTechNeo%20Publications/mouse hyn, ie ‘ | | Ok Me | | | | —_| (After Click) BD waceretecntere, xr omen | ise -Thepage ra | | thet ama ose os Bt %® 3.2.2 Keyboard Events The keyboard events that are invoke by keyboard. | Event Performed | Event Handler Description | | Keydown & Keyup | onkeydown & onkeyup | When the user press and then release the key ie Example (onkeydown) } JavaScript Keyboard Events
Now, we can access these elements by: jocument.personal narte document personal address gocument,personal city The advantage of using names is that we can put all elements somewhere else in the page and still have a working script, while a script using numbers will have to be changed. « After all, the input box city is document.forms[0].elements[2] in the example above, but when we suddenly put it at the top of the form, it becomes document.forms[0].elements[0] and we have to change the script. In JavaScript, we-can change the attribute value of any form elements dynamically; that means we can assign new value to that attribute using function and that function will be execute when event triggered. Steps 1. Select the element whose property or attribute value need to be change. 2. Use element.property to set the property of an element. 3. To set the property by using bracket notation or dot (.) notation. 4. Write function and call it on any events. Example Shim] > Shead> “ttle> JavaScript Example SJhead > “body syle = "textealign:lefi;" id = "body"> ( G . New Syll. wef academic year 19-20) (D5-16A) Tech-Neo Publications. “~

‘color:green;" > "show()"> Click Me ehutton onclick ="readonly()">ReadOnly Textfield

Editable Textfield Output (Read Only Text field) HD JavaScript Example x CG © Fite | D:/TechNeo%20Publications/textfield1.htmt Make text field read only using JavaScript Eater your name: } [ReadOnly Texted | Editable Texted | Tech-Neo Publications ‘N = Syll. wef academic year 19-20) (D5-16A) “ae

You might also like