Part 3 - Client side Validation and feedback

Question 1

this javascript event occurs when an element gets focus

for example the user uses the Tab key to ‘tab’ to an input or clicks on a text input or its label.

Answer 1

describe the javascript event
focus

Question 2

describe the following <input /> type and write its syntax

text

Answer 2

Allows us to collect a short amount of text from the user such as their name.

Syntax:

<input type=”text” />

Question 3

1.Detect that the user has changed an input value through typing or clicking by responding to form events.
2.In JavaScript, obtain a reference to the input element and its value.
3.Compare that value against what is permitted for that input element and the business requirements of the application.
4.If the value matches the requirements, provide feedback to the user to confirm this.
5.If the value doesn’t match the requirements, provide a different message, indicating that the data is not suitable, and explaining what is needed.
6.If the user attempts to submit the form to the web server while some input values don’t match the requirements, the submission is blocked and a further message explaining what needs to be done is added.
7.If the user attempts to submit the form when all input values match the requirements, then the form submission is permitted.

Answer 3

describe 7 steps for user input validation

Question 4

what is the syntax and parameters for the HTML label tag

Answer 4

syntax:

<label for="element_id">label text</label>

@param element_id the id of the element the label will be bound to

Question 5

describe the following form element and its syntax

select

Answer 5

This is a form element that will create a drop down list of options of which we can select only one option from.

NOTE: However this can be extended to accept multiple selections if the multiple attribute is used

Syntax:

<select name=”” id=””>
    <option value=””>””</option>
    <option value=””>””</option>
    <option value=””>””</option>
</select>

Question 6

this will tie a regular expression to the start or end of the value

NOTE: These are placed within the forward slashes with the pattern

Answer 6

describe the
javascript regex anchor

Question 7

this javascript event occurs when the value of an element changes at the point the change is completed

for example by clicking or by losing focus after entering text. This event is particularly useful for detecting that the user has made a new selection from a dropdown list, set of radio buttons or checkboxes.

Answer 7

describe the javascript event
change

Question 8

This is a form element that can be used to collect a large piece of text from the user such as a comment or review

Syntax:

<textarea></textarea>

Answer 8

describe the form element and syntax of

textarea

Question 9

method:
Returns the string value of the regular expression

Answer 9

describe the regex method
toString()

Question 10

describe the following <input /> type and write its syntax

hidden

Answer 10

Allows us to create a hiddn field that will be sent to the server and hold some value we give it

Syntax:

<input type=”hidden” />

Question 11

what are the three methods to
attach an event handler to a document event

Answer 11

this can be done by:
1. attaching the event hanler within the HTML
2. attaching it using javascript (via referencing the element)
3. attach In javascript using the addEventListener() method

Question 12

regex:

/09$/

Answer 12

write a regex that will match values that end with 09

Question 13

this is a form element that provides the textual description for the input tag. such as asking a question that will accompany the input

note: this is used in contrast to only using <p> tags

Answer 13

describe the HTML form element

<label></label>

Question 14

describe the following attribute of the <input /> tag

Min=””

Answer 14

This <input /> attribute

specify a minimum value

NOTE: works only with number, range, date, datetime-local, month, time and week

Question 15

This works just like the text input type but will hide the typed text

Syntax:

<input type=”password” />

Answer 15

describe the following <input /> type and write its syntax

password

Question 16

using CSS write the syntax to select an input element which has the type attribute of text

Answer 16

syntax:

input[type=text] {
    declaration;
}

Question 17

syntax:

<form onsubmit="script">

@param script the script to be ran on submit

Answer 17

what is the syntax and parameters of the <form></form> attribute
onsubmit

Question 18

give 2 attributes of the form element

<textarea></textarea>

Answer 18

attributes include:

Rows = “” - the number of rows the textbox will have (in characters)
Cols = “” - the number of columns the textbox will have (in characters)

Question 19

what is the syntax for creating a regex object in javascript

Answer 19

syntax:

/pattern/modifier(s);

Example:

var regex = /fox/i;

Question 20

this is a special string of characters that will create a search pattern. it can then be tested against a string to check whether the pattern is contained within the string

Answer 20

what is a
regular expression (REGEX)

Question 21

this <input /> attribute gives the input element a name
NOTE: this attribute is sent to the server on form submission

Answer 21

describe the following attribute of the <input /> tag

Name = “”

Question 22

this can be accomplished using the HTML

<form></form>

Answer 22

how can we collect and then send user input back to a server

Question 23

this is an object that holds the html element that triggered the event and all of its properties

Answer 23

describe
event.target

Question 24

is a property of the event.target object and will return the value that is held by the HTML element

Answer 24

describe
event.target.value

Question 25

describe the following `` type and write its syntax **checkbox**

Answer 25

Similar to the radio input type but when each input shares the same name it becomes a group and the user can select multiple items from the checkbox group Syntax: ``

Question 26

this Is a form element that can be placed within a form and can be used to collect different types of data from the user NOTE: This is a self closing element or empty element so for it to be xml compliant it must be manually closed

Answer 26

describe the HTML form element ``

Question 27

describe the following CSS selector and its syntax **focus**

Answer 27

is a CSS selector that is used to select the element that has focus. syntax: ``` :focus { css declarations; } ```

Question 28

Syntax: `` @param element a html element such as input @param eventType an event type such as onchange @param myScript a javascript function that has 1 argument passed to it being the event object

Answer 28

what is the syntax and parameters that will **attach an event handler to an element via HTML**

Question 29

what is a **regular expression (REGEX)**

Answer 29

this is a special string of characters that will create a search pattern. it can then be tested against a string to check whether the pattern is contained within the string

Question 30

write the regex that will match only the value "fox"

Answer 30

regex: `/^fox$/`

Question 31

describe the following attribute of the `` tag **Required **

Answer 31

This `` attribute states that it is a requirement that this input is filled before form is sent

Question 32

attributes include: Rows = “” - the number of rows the textbox will have (in characters) Cols = “” - the number of columns the textbox will have (in characters)

Answer 32

give 2 attributes of the form element ``

Question 33

describe an **event handler**

Answer 33

this is a script or function that will be able to handle any events that occur on the page

Question 34

write out the HTML that is a skeleton of a form with one input

Answer 34

HTML: ```

label_text_for_input

```

Question 35

HTML: ```

label_text_for_input

```

Answer 35

write out the HTML that is a skeleton of a form with one input

Question 36

this can be done by: 1. selecting a form element 2. selecting a form element and attribute 3. selecting the class of an element 4. selecting the id of an element

Answer 36

name 4 ways we can select elements and style forms in CSS

Question 37

This `` attribute specify a maximum value NOTE: works only with number, range, date, datetime-local, month, time and week

Answer 37

describe the following attribute of the `` tag **Max=”” **

Question 38

HTML: ```

label text` @param element_id the id of the element the label will be bound to

Answer 38

what is the syntax and parameters for the HTML label tag

Question 45

name 3 javascript regex methods

Answer 45

methods: 1. exec() 2. test() 3. toString()

Question 46

describe the javascript event **change**

Answer 46

this javascript event occurs when the value of an element changes at the point the change is completed for example by clicking or by losing focus after entering text. This event is particularly useful for detecting that the user has made a new selection from a dropdown list, set of radio buttons or checkboxes.

Question 47

name 4 ways we can select elements and style forms in CSS

Answer 47

this can be done by: 1. selecting a form element 2. selecting a form element and attribute 3. selecting the class of an element 4. selecting the id of an element

Question 48

regex modifier that Perform a global match (find all matches rather than stopping after the first match)

Answer 48

describe the javascript regex modifier **g**

Question 49

regex: `/^fox$/`

Answer 49

write the regex that will match only the value "fox"

Question 50

what is the syntax and parameters that will **attach an event handler to an element via javascripts addEventListener() method**

Answer 50

Syntax: `element.addEventListener(event, function, useCapture)` @param event the event type we wish to have a function called for @parm function the javascript function that will be called on such an event @param useCapture a boolean used for bubbling

Question 51

describe the form element and syntax of **textarea**

Answer 51

This is a form element that can be used to collect a large piece of text from the user such as a comment or review Syntax: ``

Question 52

this Tests for a match in a string. Returns the first match

Answer 52

describe the regex method **exec()**

Question 53

is a CSS selector that is used to select the element that has focus. syntax: ``` :focus { css declarations; } ```

Answer 53

describe the following CSS selector and its syntax **focus**

Question 54

describe the **multiple attribute ** of the form element ``

Answer 54

this attribute specifies that multiple item may be selected from the dropdown list by the user using CTRL it also specifies how many options are shown at a time

Question 55

is the charcter used to anchor the regex to the end of the value

Answer 55

describe the javascript regex anchor **$**

Question 56

describe the following `` type and write its syntax **email**

Answer 56

Works similar to the text input type except allows for limited email validation on the client side by the browser Syntax: ``

Question 57

describe the regex method **exec()**

Answer 57

this Tests for a match in a string. Returns the first match

Question 58

we can check this using ``

Answer 58

in HTML how can we check if javascript has been disabled on the client

Question 59

the reason for this is: 1.**Accessibility** - a screen reader for example can associate the label and input 2.**Usability/accessibility** - the label itself acts as a clickable element for focusing on the input this increases the clickable area of the input (especially good for radio buttons)

Answer 59

when we have used an `` tag why should we always have a `` tag associated with it

Question 60

is a property of the event object and will return the type of event that was triggered

Answer 60

describe **event.type**

Question 61

This `` attribute give the input an initial value or value to hold NOTE: this attribute will be sent to the server on submition of the form

Answer 61

describe the following attribute of the `` tag **Value = “”**

Question 62

describe the javascript event **blur**

Answer 62

this javascript event occurs when an element loses focus for example the user clicks somewhere else on the page or field.

Question 63

methods: 1. exec() 2. test() 3. toString()

Answer 63

name 3 javascript regex methods

Question 64

Syntax: `element.addEventListener(event, function, useCapture)` @param event the event type we wish to have a function called for @parm function the javascript function that will be called on such an event @param useCapture a boolean used for bubbling

Answer 64

what is the syntax and parameters that will **attach an event handler to an element via javascripts addEventListener() method**

Question 65

describe the javascript regex anchor **$**

Answer 65

is the charcter used to anchor the regex to the end of the value

Question 66

This `` attribute states that it is a requirement that this input is filled before form is sent

Answer 66

describe the following attribute of the `` tag **Required **

Question 67

describe the HTML form element ``

Answer 67

this Is a form element that can be placed within a form and can be used to collect different types of data from the user NOTE: This is a self closing element or empty element so for it to be xml compliant it must be manually closed

Question 68

describe the following attribute of the `` tag **Checked**

Answer 68

This `` attribute will specify that this input element is selected by default

Question 69

describe the following `` type and write its syntax **number**

Answer 69

can be used to collect numeric only data from the user Syntax: ``

Question 70

describe **Event.target.id**

Answer 70

is a property of the event.target object and will return the id of the element

Question 71

describe the javascript regex modifier **i**

Answer 71

regex modifier that Perform case-insensitive matching

Question 72

describe **event.target.value**

Answer 72

is a property of the event.target object and will return the value that is held by the HTML element

Question 73

write the HTML that creates a form with the onsubmit attribute that 1. calls a function named handleSubmit() 2. passes the function the target of the event 3. determines whether the form should be submitted or not

Answer 73

HTML: ``` ` @param script the script to be ran on submit

Question 79

Similar to the radio input type but when each input shares the same name it becomes a group and the user can select multiple items from the checkbox group Syntax: ``

Answer 79

describe the following `` type and write its syntax **checkbox**

Question 80

Syntax: `object.eventType = script;` @param object a html element @param eventType an event type such as onchange @param script a javascript function that has 1 argument passed to it being the evnt object

Answer 80

what is the syntax and parameters that will **attach an event handler to an element via javascript** (get a reference to the HTML element)

Question 81

is a property of the event.target object and will return the id of the element

Answer 81

describe **Event.target.id**

Question 82

describe the following attribute of the `` tag **Id = “”**

Answer 82

This `` attribute gives the element a unique id within the html NOTE: can be referenced by CSS, javascript and HTML tags such as ``

Question 83

syntax: `/pattern/modifier(s);` Example: `var regex = /fox/i;`

Answer 83

what is the syntax for creating a regex object in javascript

Question 84

This `` attribute will specify that this input element is selected by default

Answer 84

describe the following attribute of the `` tag **Checked**

Question 85

Creates a submit button and is used to submit the form NOTE: this itself can also hold a name and a value attribute so on the server side we could have different behaviours depending upon these Syntax: ``

Answer 85

describe the following `` type and write its syntax **submit**

Question 86

write a regex that will match values that end with 09

Answer 86

regex: `/09$/`

Question 87

describe the **javascript regex anchor**

Answer 87

this will tie a regular expression to the start or end of the value NOTE: These are placed within the forward slashes with the pattern

Question 88

describe the following `` type and write its syntax **submit**

Answer 88

Creates a submit button and is used to submit the form NOTE: this itself can also hold a name and a value attribute so on the server side we could have different behaviours depending upon these Syntax: ``

Question 89

describe the following attribute of the `` tag **Maxlength = “”**

Answer 89

This `` attribute state a maximum number of characters for the input

Question 90

Allows us to collect a short amount of text from the user such as their name. Syntax: ``

Answer 90

describe the following `` type and write its syntax **text**

Question 91

method: Tests for a match in a string. Returns true or false

Answer 91

describe the regex method **test()**

Question 92

describe **event.type**

Answer 92

is a property of the event object and will return the type of event that was triggered

Question 93

write the syntax to select an input element in CSS

Answer 93

syntax: ``` input { declaration; } ```

Question 94

Works similar to the text input type except allows for limited email validation on the client side by the browser Syntax: ``

Answer 94

describe the following `` type and write its syntax **email**

Question 95

this javascript event occurs when the value of an element changes, each time it happens, for example on every keypress. NOTE: This event may not be supported in all web browsers, and the user may not welcome feedback before they have finished entering data

Answer 95

describe the javascript event **input**

Question 96

describe the javascript event **focus**

Answer 96

this javascript event occurs when an element gets focus for example the user uses the Tab key to ‘tab’ to an input or clicks on a text input or its label.

Question 97

when we have used an `` tag why should we always have a `` tag associated with it

Answer 97

the reason for this is: 1.**Accessibility** - a screen reader for example can associate the label and input 2.**Usability/accessibility** - the label itself acts as a clickable element for focusing on the input this increases the clickable area of the input (especially good for radio buttons)

Question 98

these include: ``` <button> <fieldset> <legend> <datalist> <output> <option> <optgroup> ``` </div> </div> <div class='card-face answer'> <div class='answer-content'> name as many **HTML form elements** as you can. there are 11 in total </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='99' id='card-410217343'> <div class='header'> 99 </div> <div class='card-face question'> <div class='question-content'> write a regex that will match values that begin with 09 </div> </div> <div class='card-face answer'> <div class='answer-content'> regex: `/^09/` </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='100' id='card-410216929'> <div class='header'> 100 </div> <div class='card-face question'> <div class='question-content'> describe the regex method **test()** </div> </div> <div class='card-face answer'> <div class='answer-content'> method: Tests for a match in a string. Returns true or false </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='101' id='card-409995494'> <div class='header'> 101 </div> <div class='card-face question'> <div class='question-content'> describe the HTML form element `<label></label>` </div> </div> <div class='card-face answer'> <div class='answer-content'> this is a form element that provides the textual description for the input tag. such as asking a question that will accompany the input note: this is used in contrast to only using <p> tags </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='102' id='card-410217514'> <div class='header'> 102 </div> <div class='card-face question'> <div class='question-content'> 1. this will create an event upon the form submition the event can then be passed to javascript 2. can be used to call a script before the form is sent 3. can be used to determine whether the form should be sent (by including a return keyword) </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the HTML `<form></form>` attribute **onsubmit** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='103' id='card-410217486'> <div class='header'> 103 </div> <div class='card-face question'> <div class='question-content'> Can be used to create a set of radio buttons that the user can select from. NOTE: If each radio button shares the same name then only one of those radio buttons may be selected Syntax: `<input type=”radio” />` </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the following `<input />` type and write its syntax **radio** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='104' id='card-410217506'> <div class='header'> 104 </div> <div class='card-face question'> <div class='question-content'> this javascript event occurs when an element loses focus for example the user clicks somewhere else on the page or field. </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the javascript event **blur** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='105' id='card-410217494'> <div class='header'> 105 </div> <div class='card-face question'> <div class='question-content'> This is a form element that will create a drop down list of options of which we can select only one option from. NOTE: However this can be extended to accept multiple selections if the multiple attribute is used Syntax: ``` <select name=”” id=””> <option value=””>””</option> <option value=””>””</option> <option value=””>””</option> </select> ``` </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the following form element and its syntax **select** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='106' id='card-410087662'> <div class='header'> 106 </div> <div class='card-face question'> <div class='question-content'> describe the javascript event **input** </div> </div> <div class='card-face answer'> <div class='answer-content'> this javascript event occurs when the value of an element changes, each time it happens, for example on every keypress. NOTE: This event may not be supported in all web browsers, and the user may not welcome feedback before they have finished entering data </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='107' id='card-409995293'> <div class='header'> 107 </div> <div class='card-face question'> <div class='question-content'> name as many **HTML form elements** as you can. there are 11 in total </div> </div> <div class='card-face answer'> <div class='answer-content'> these include: ``` <input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup> ``` </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='108' id='card-410216371'> <div class='header'> 108 </div> <div class='card-face question'> <div class='question-content'> what is the syntax and parameters that will **attach an event handler to an element via javascript** (get a reference to the HTML element) </div> </div> <div class='card-face answer'> <div class='answer-content'> Syntax: `object.eventType = script;` @param object a html element @param eventType an event type such as onchange @param script a javascript function that has 1 argument passed to it being the evnt object </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='109' id='card-410217496'> <div class='header'> 109 </div> <div class='card-face question'> <div class='question-content'> this attribute specifies that multiple item may be selected from the dropdown list by the user using CTRL it also specifies how many options are shown at a time </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the **multiple attribute ** of the form element `<select></select>` </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='110' id='card-410000278'> <div class='header'> 110 </div> <div class='card-face question'> <div class='question-content'> describe 7 steps for user input validation </div> </div> <div class='card-face answer'> <div class='answer-content'> 1.Detect that the user has changed an input value through typing or clicking by responding to form events. 2.In JavaScript, obtain a reference to the input element and its value. 3.Compare that value against what is permitted for that input element and the business requirements of the application. 4.If the value matches the requirements, provide feedback to the user to confirm this. 5.If the value doesn’t match the requirements, provide a different message, indicating that the data is not suitable, and explaining what is needed. 6.If the user attempts to submit the form to the web server while some input values don’t match the requirements, the submission is blocked and a further message explaining what needs to be done is added. 7.If the user attempts to submit the form when all input values match the requirements, then the form submission is permitted. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='111' id='card-410217499'> <div class='header'> 111 </div> <div class='card-face question'> <div class='question-content'> syntax: ``` input[type=text] { declaration; } ``` </div> </div> <div class='card-face answer'> <div class='answer-content'> using CSS write the syntax to select an input element which has the type attribute of text </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='112' id='card-410000470'> <div class='header'> 112 </div> <div class='card-face question'> <div class='question-content'> describe an **event object** </div> </div> <div class='card-face answer'> <div class='answer-content'> this is created whenever an event occurs on the web page (such as a value change on a form or a mouse click). It is a javascript object that has within it properties and values that describe everything about the event such as which html element created it or what type of event it was </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='113' id='card-409996273'> <div class='header'> 113 </div> <div class='card-face question'> <div class='question-content'> describe the following attribute of the `<input />` tag **Minlength = “”** </div> </div> <div class='card-face answer'> <div class='answer-content'> This `<input />` attribute state a minimum number of characters for the input </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='114' id='card-410216271'> <div class='header'> 114 </div> <div class='card-face question'> <div class='question-content'> what is the syntax and parameters that will **attach an event handler to an element via HTML** </div> </div> <div class='card-face answer'> <div class='answer-content'> Syntax: `<element eventType="myScript">` @param element a html element such as input @param eventType an event type such as onchange @param myScript a javascript function that has 1 argument passed to it being the event object </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='115' id='card-410217517'> <div class='header'> 115 </div> <div class='card-face question'> <div class='question-content'> this is a script or function that will be able to handle any events that occur on the page </div> </div> <div class='card-face answer'> <div class='answer-content'> describe an **event handler** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='116' id='card-410217529'> <div class='header'> 116 </div> <div class='card-face question'> <div class='question-content'> regex modifier that Perform case-insensitive matching </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the javascript regex modifier **i** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='117' id='card-410217488'> <div class='header'> 117 </div> <div class='card-face question'> <div class='question-content'> Allows us to create a hiddn field that will be sent to the server and hold some value we give it Syntax: `<input type=”hidden” />` </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the following `<input />` type and write its syntax **hidden** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='118' id='card-409996202'> <div class='header'> 118 </div> <div class='card-face question'> <div class='question-content'> describe the following attribute of the `<input />` tag **Name = “”** </div> </div> <div class='card-face answer'> <div class='answer-content'> this `<input />` attribute gives the input element a name NOTE: this attribute is sent to the server on form submission </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='119' id='card-410217498'> <div class='header'> 119 </div> <div class='card-face question'> <div class='question-content'> syntax: ``` input { declaration; } ``` </div> </div> <div class='card-face answer'> <div class='answer-content'> write the syntax to select an input element in CSS </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='120' id='card-410000114'> <div class='header'> 120 </div> <div class='card-face question'> <div class='question-content'> in HTML how can we check if javascript has been disabled on the client </div> </div> <div class='card-face answer'> <div class='answer-content'> we can check this using `<noscript>”display text if javascript disabled”</noscript>` </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='121' id='card-410217531'> <div class='header'> 121 </div> <div class='card-face question'> <div class='question-content'> is the charcter used to anchor the regex to the start of the value </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the javascript regex anchor **^** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='122' id='card-409997227'> <div class='header'> 122 </div> <div class='card-face question'> <div class='question-content'> describe the following `<input />` type and write its syntax **radio** </div> </div> <div class='card-face answer'> <div class='answer-content'> Can be used to create a set of radio buttons that the user can select from. NOTE: If each radio button shares the same name then only one of those radio buttons may be selected Syntax: `<input type=”radio” />` </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='123' id='card-409996276'> <div class='header'> 123 </div> <div class='card-face question'> <div class='question-content'> describe the following attribute of the `<input />` tag **Value = “”** </div> </div> <div class='card-face answer'> <div class='answer-content'> This `<input />` attribute give the input an initial value or value to hold NOTE: this attribute will be sent to the server on submition of the form </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='124' id='card-410217034'> <div class='header'> 124 </div> <div class='card-face question'> <div class='question-content'> describe the javascript regex modifier **g** </div> </div> <div class='card-face answer'> <div class='answer-content'> regex modifier that Perform a global match (find all matches rather than stopping after the first match) </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='125' id='card-410217518'> <div class='header'> 125 </div> <div class='card-face question'> <div class='question-content'> this can be done by: 1. attaching the event hanler within the HTML 2. attaching it using javascript (via referencing the element) 3. attach In javascript using the addEventListener() method </div> </div> <div class='card-face answer'> <div class='answer-content'> what are the three methods to **attach an event handler to a document event** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='126' id='card-409995059'> <div class='header'> 126 </div> <div class='card-face question'> <div class='question-content'> how can we collect and then send user input back to a server </div> </div> <div class='card-face answer'> <div class='answer-content'> this can be accomplished using the HTML `<form></form>` </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='127' id='card-410217485'> <div class='header'> 127 </div> <div class='card-face question'> <div class='question-content'> can be used to collect numeric only data from the user Syntax: `<input type=”number” />` </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the following `<input />` type and write its syntax **number** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='128' id='card-410217479'> <div class='header'> 128 </div> <div class='card-face question'> <div class='question-content'> This `<input />` attribute specify a minimum value NOTE: works only with number, range, date, datetime-local, month, time and week </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the following attribute of the `<input />` tag **Min=””** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='129' id='card-410217477'> <div class='header'> 129 </div> <div class='card-face question'> <div class='question-content'> This `<input />` attribute state a minimum number of characters for the input </div> </div> <div class='card-face answer'> <div class='answer-content'> describe the following attribute of the `<input />` tag **Minlength = “”** </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=21106063&returnTo=%2Fpacks%2F21106063%2Fsubscribe&source=preview-card&subject=TT284%3A+block+2+-+Web+Architectures' data-card-is-blurrable data-number='130' id='card-410217533'> <div class='header'> 130 </div> <div class='card-face question'> <div class='question-content'> regex: `/^09/` </div> </div> <div class='card-face answer'> <div class='answer-content'> write a regex that will match values that begin with 09 </div> </div> </div> </div> </div> </div> <div class='flashcards-sidebar'> <div class='sidebar-header'> <div class='react-component' id='flashcards-search-bar'> <div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div> </div> </div> <div class='sidebar-content'> <p class='deck-subject-heading'> <a class="decks-in-subject-link" href="/packs/tt284-block-2-web-architectures-21106063"><span class="pack-name">TT284: block 2 - Web Architectures</span> (5 decks) </a></p> <ul class='deck-list-items'> <a class='deck-link ' href='/flashcards/part-1-architectures-12288503/packs/21106063'> <li class='deck-list-item'>Part 1 - Architectures</li> </a> <a class='deck-link ' href='/flashcards/part-2-client-side-javascript-and-the-do-12322936/packs/21106063'> <li class='deck-list-item'>Part 2 - Client side JavaScript and the DOM</li> </a> <a class='deck-link selected' href='/flashcards/part-3-client-side-validation-and-feedba-12410897/packs/21106063'> <li class='deck-list-item'>Part 3 - Client side Validation and feedback</li> </a> <a class='deck-link ' href='/flashcards/part-4-server-side-handling-data-with-ph-12437098/packs/21106063'> <li class='deck-list-item'>Part 4 - Server side Handling data with PHP</li> </a> <a class='deck-link ' href='/flashcards/part-5-server-side-using-databases-with-12505155/packs/21106063'> <li class='deck-list-item'>Part 5 - Server side Using databases with PHP</li> </a> </ul> </div> </div> </div> <div id='tooltip-controller'></div> <div data='{"packId":21106063,"source":"spaced-repetition-modal","subject":"TT284: block 2 - Web Architectures","resources":{"deckId":12410897,"packId":21106063},"returnTo":"/packs/21106063/subscribe"}' id='spaced-repetition-modal-controller'></div> <div id='banner-controller'></div> <div id='dialog-modal-controller'></div> <div class='band band-footer'> <div class='footer-main'> <ul class='sections'> <li class='section key-links'> <p class='section-heading'> Key Links </p> <ul class='options-list'> <li class='option'> <a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a> </li> <li class='option'> <a class="option-link" href="/companies">Corporate Training</a> </li> <li class='option'> <a class="option-link" href="/teachers">Teachers & Schools</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a> </li> </ul> </li> <li class='section subjects'> <p class='section-heading'> Subjects </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a> </li> <li class='option'> <a class="option-link" href="/subjects/law">Law Education</a> </li> <li class='option'> <a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a> </li> <li class='option'> <a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a> </li> <li class='option certified-classes'> <a class="option-link" href="/learn">All Certified Classes</a> </li> </ul> </li> <li class='section company'> <p class='section-heading'> Company </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/about">About Us</a> </li> <li class='option'> <a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a> </li> <li class='option'> <a target="_blank" class="option-link" href="/careers">Careers</a> </li> </ul> </li> <li class='section find-us'> <p class='section-heading'> Find Us </p> <ul class='social-media-list'> <li class='option twitter-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option linkedin-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option facebook-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option youtube-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option pinterest-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option tiktok-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option insta-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> </ul> <div class='get-the-app'> <div class='qr-code'> <img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" /> </div> <div class='app-badges'> <div class='badge apple-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> <div class='badge android-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> </div> </div> </li> </ul> </div> <div class='footer-blurb'> Brainscape helps you reach your goals faster, through stronger study habits. <br> © 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a> </div> </div> <script> if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') { __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {}; } </script> <script> window.addEventListener('load', () => { setTimeout(() => { const script = document.createElement('script'); script.src = "/pks/js/public-deck-cards-page-7b7ec236709c09bce023.js"; script.defer = true; document.body.appendChild(script); }, 0); }); </script> <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" defer="defer"></script> <script> document.addEventListener("mainSharedready", () => { GaHelper.setGaDimension("dimension1","No"); }); </script> <script type='application/ld+json'> {"@context":"https://schema.org/","@type":"Quiz","about":{"@type":"Thing","name":"Part 3 - Client side Validation and feedback"},"hasPart":[{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this javascript event occurs when an element gets focus for example the user uses the Tab key to ‘tab’ to an input or clicks on a text input or its label.","acceptedAnswer":{"@type":"Answer","text":"describe the javascript event focus"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following `` type and write its syntax text","acceptedAnswer":{"@type":"Answer","text":"Allows us to collect a short amount of text from the user such as their name. Syntax: ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"1.Detect that the user has changed an input value through typing or clicking by responding to form events. 2.In JavaScript, obtain a reference to the input element and its value. 3.Compare that value against what is permitted for that input element and the business requirements of the application. 4.If the value matches the requirements, provide feedback to the user to confirm this. 5.If the value doesn’t match the requirements, provide a different message, indicating that the data is not suitable, and explaining what is needed. 6.If the user attempts to submit the form to the web server while some input values don’t match the requirements, the submission is blocked and a further message explaining what needs to be done is added. 7.If the user attempts to submit the form when all input values match the requirements, then the form submission is permitted.","acceptedAnswer":{"@type":"Answer","text":"describe 7 steps for user input validation"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"what is the syntax and parameters for the HTML label tag","acceptedAnswer":{"@type":"Answer","text":"syntax: `label text` @param element_id the id of the element the label will be bound to"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following form element and its syntax select","acceptedAnswer":{"@type":"Answer","text":"This is a form element that will create a drop down list of options of which we can select only one option from. NOTE: However this can be extended to accept multiple selections if the multiple attribute is used Syntax: ``` ”” ”” ”” ```"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this will tie a regular expression to the start or end of the value NOTE: These are placed within the forward slashes with the pattern","acceptedAnswer":{"@type":"Answer","text":"describe the javascript regex anchor"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this javascript event occurs when the value of an element changes at the point the change is completed for example by clicking or by losing focus after entering text. This event is particularly useful for detecting that the user has made a new selection from a dropdown list, set of radio buttons or checkboxes.","acceptedAnswer":{"@type":"Answer","text":"describe the javascript event change"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"This is a form element that can be used to collect a large piece of text from the user such as a comment or review Syntax: ``","acceptedAnswer":{"@type":"Answer","text":"describe the form element and syntax of textarea"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"method: Returns the string value of the regular expression","acceptedAnswer":{"@type":"Answer","text":"describe the regex method toString()"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following `` type and write its syntax hidden","acceptedAnswer":{"@type":"Answer","text":"Allows us to create a hiddn field that will be sent to the server and hold some value we give it Syntax: ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"what are the three methods to attach an event handler to a document event","acceptedAnswer":{"@type":"Answer","text":"this can be done by: 1. attaching the event hanler within the HTML 2. attaching it using javascript (via referencing the element) 3. attach In javascript using the addEventListener() method"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"regex: `/09$/`","acceptedAnswer":{"@type":"Answer","text":"write a regex that will match values that end with 09"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this is a form element that provides the textual description for the input tag. such as asking a question that will accompany the input note: this is used in contrast to only using tags","acceptedAnswer":{"@type":"Answer","text":"describe the HTML form element ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following attribute of the `` tag Min=””","acceptedAnswer":{"@type":"Answer","text":"This `` attribute specify a minimum value NOTE: works only with number, range, date, datetime-local, month, time and week"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"This works just like the text input type but will hide the typed text Syntax: ``","acceptedAnswer":{"@type":"Answer","text":"describe the following `` type and write its syntax password"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"using CSS write the syntax to select an input element which has the type attribute of text","acceptedAnswer":{"@type":"Answer","text":"syntax: ``` input[type=text] { declaration; } ```"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"syntax: `` @param script the script to be ran on submit","acceptedAnswer":{"@type":"Answer","text":"what is the syntax and parameters of the `` attribute onsubmit"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"give 2 attributes of the form element ``","acceptedAnswer":{"@type":"Answer","text":"attributes include: Rows = “” - the number of rows the textbox will have (in characters) Cols = “” - the number of columns the textbox will have (in characters)"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"what is the syntax for creating a regex object in javascript","acceptedAnswer":{"@type":"Answer","text":"syntax: `/pattern/modifier(s);` Example: `var regex = /fox/i;`"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this is a special string of characters that will create a search pattern. it can then be tested against a string to check whether the pattern is contained within the string","acceptedAnswer":{"@type":"Answer","text":"what is a regular expression (REGEX)"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this `` attribute gives the input element a name NOTE: this attribute is sent to the server on form submission","acceptedAnswer":{"@type":"Answer","text":"describe the following attribute of the `` tag Name = “”"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this can be accomplished using the HTML ``","acceptedAnswer":{"@type":"Answer","text":"how can we collect and then send user input back to a server"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this is an object that holds the html element that triggered the event and all of its properties","acceptedAnswer":{"@type":"Answer","text":"describe event.target"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"is a property of the event.target object and will return the value that is held by the HTML element","acceptedAnswer":{"@type":"Answer","text":"describe event.target.value"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following `` type and write its syntax checkbox","acceptedAnswer":{"@type":"Answer","text":"Similar to the radio input type but when each input shares the same name it becomes a group and the user can select multiple items from the checkbox group Syntax: ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this Is a form element that can be placed within a form and can be used to collect different types of data from the user NOTE: This is a self closing element or empty element so for it to be xml compliant it must be manually closed","acceptedAnswer":{"@type":"Answer","text":"describe the HTML form element ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following CSS selector and its syntax focus","acceptedAnswer":{"@type":"Answer","text":"is a CSS selector that is used to select the element that has focus. syntax: ``` :focus { css declarations; } ```"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Syntax: `` @param element a html element such as input @param eventType an event type such as onchange @param myScript a javascript function that has 1 argument passed to it being the event object","acceptedAnswer":{"@type":"Answer","text":"what is the syntax and parameters that will attach an event handler to an element via HTML"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"what is a regular expression (REGEX)","acceptedAnswer":{"@type":"Answer","text":"this is a special string of characters that will create a search pattern. it can then be tested against a string to check whether the pattern is contained within the string"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"write the regex that will match only the value \"fox\"","acceptedAnswer":{"@type":"Answer","text":"regex: `/^fox$/`"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following attribute of the `` tag Required ","acceptedAnswer":{"@type":"Answer","text":"This `` attribute states that it is a requirement that this input is filled before form is sent"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"attributes include: Rows = “” - the number of rows the textbox will have (in characters) Cols = “” - the number of columns the textbox will have (in characters)","acceptedAnswer":{"@type":"Answer","text":"give 2 attributes of the form element ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe an event handler","acceptedAnswer":{"@type":"Answer","text":"this is a script or function that will be able to handle any events that occur on the page"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"write out the HTML that is a skeleton of a form with one input","acceptedAnswer":{"@type":"Answer","text":"HTML: ``` label_text_for_input ```"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"HTML: ``` label_text_for_input ```","acceptedAnswer":{"@type":"Answer","text":"write out the HTML that is a skeleton of a form with one input"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this can be done by: 1. selecting a form element 2. selecting a form element and attribute 3. selecting the class of an element 4. selecting the id of an element","acceptedAnswer":{"@type":"Answer","text":"name 4 ways we can select elements and style forms in CSS"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"This `` attribute specify a maximum value NOTE: works only with number, range, date, datetime-local, month, time and week","acceptedAnswer":{"@type":"Answer","text":"describe the following attribute of the `` tag Max=”” "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"HTML: ``` ","acceptedAnswer":{"@type":"Answer","text":"write the HTML that creates a form with the onsubmit attribute that 1. calls a function named handleSubmit() 2. passes the function the target of the event 3. determines whether the form should be submitted or not"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the following `` type and write its syntax password","acceptedAnswer":{"@type":"Answer","text":"This works just like the text input type but will hide the typed text Syntax: ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe event.target","acceptedAnswer":{"@type":"Answer","text":"this is an object that holds the html element that triggered the event and all of its properties"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this is created whenever an event occurs on the web page (such as a value change on a form or a mouse click). It is a javascript object that has within it properties and values that describe everything about the event such as which html element created it or what type of event it was","acceptedAnswer":{"@type":"Answer","text":"describe an event object"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"This `` attribute gives the element a unique id within the html NOTE: can be referenced by CSS, javascript and HTML tags such as ``","acceptedAnswer":{"@type":"Answer","text":"describe the following attribute of the `` tag Id = “”"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"This `` attribute state a maximum number of characters for the input","acceptedAnswer":{"@type":"Answer","text":"describe the following attribute of the `` tag Maxlength = “”"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"syntax: `label text` @param element_id the id of the element the label will be bound to","acceptedAnswer":{"@type":"Answer","text":"what is the syntax and parameters for the HTML label tag"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"name 3 javascript regex methods","acceptedAnswer":{"@type":"Answer","text":"methods: 1. exec() 2. test() 3. toString()"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the javascript event change","acceptedAnswer":{"@type":"Answer","text":"this javascript event occurs when the value of an element changes at the point the change is completed for example by clicking or by losing focus after entering text. This event is particularly useful for detecting that the user has made a new selection from a dropdown list, set of radio buttons or checkboxes."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"name 4 ways we can select elements and style forms in CSS","acceptedAnswer":{"@type":"Answer","text":"this can be done by: 1. selecting a form element 2. selecting a form element and attribute 3. selecting the class of an element 4. selecting the id of an element"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"regex modifier that Perform a global match (find all matches rather than stopping after the first match)","acceptedAnswer":{"@type":"Answer","text":"describe the javascript regex modifier g"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"regex: `/^fox$/`","acceptedAnswer":{"@type":"Answer","text":"write the regex that will match only the value \"fox\""}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"what is the syntax and parameters that will attach an event handler to an element via javascripts addEventListener() method","acceptedAnswer":{"@type":"Answer","text":"Syntax: `element.addEventListener(event, function, useCapture)` @param event the event type we wish to have a function called for @parm function the javascript function that will be called on such an event @param useCapture a boolean used for bubbling"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"describe the form element and syntax of textarea","acceptedAnswer":{"@type":"Answer","text":"This is a form element that can be used to collect a large piece of text from the user such as a comment or review Syntax: ``"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"this Tests for a match in a string. Returns the first match","acceptedAnswer":{"@type":"Answer","text":"describe the regex method exec()"}}],"educationalAlignment":[{"@type":"AlignmentObject","alignmentType":"educationalSubject","targetName":"Part 3 - Client side Validation and feedback"}]} </script> </body> </html>