Part 6 - Working with forms and collecting data Flashcards
what is a disadvantage of
Common gateway interface (CGI)
a disadvantage of this is that Every form returned to the server requires a new process to be created for the CGI script
describe the html tag
<.textarea></.textarea>
This tag can be used within a form to allow the user to enter multi line data such as an address or a comment or review. Any initial value can be supplied within the element itslef (ie between the tags)
what is the markup to:
1. create a hidden field
2. give it a unique identification of “a_name”
3. give it a default value of “a_value”
describe the following markup
<.input type=”hidden” name=”a_name” value=”a_value” />
describe the action attribute of the html form element
this is used to define where the form will be sent such as to a script on a server
describe the
name attribute
of the html input tag
this provides an identification for the tag which can be used by css or javascript
this can be accomplished by:
<.fieldset>
<.legend>Personalia:</.legend>
<.input>
…
…
</.fieldset>
**explained** <.fieldset> - this creates a boxing around our inputs <.legend> - this creates a legend for the boxed section
how can we divide our form up into sections
this provides an identification for the tag which can be used by css or javascript
describe the
name attribute
of the html input tag
this can be accomplished using:
Username: <.input type=”text” name=”user” />
how would we create a
username field
in a HTML form
describe the following markup
<.input type=”reset” name=”reset” value=”Reset” />
what is the markup that:
1. create a reset button
2. give it a unique identifier of reset
3. give the button text that says “reset”
this is the name/value data in the url after the ? and is seen when the http get method is used to send form data
what is a
query string
This defines the HTTP request method we would like to use such as GET or POST
describe the
method
attribute of the html form element
what is the role of a
firewall
Its role is to determine which packets should and should not be accepted:
This can occur when a server makes a request to you or even when you request data from a server.
this attribute when used with a radio button defines the group it belongs to (if this is selected other members of the group are deselected)
in the context of a html radio button describe the
name attribute
this is HTTP but is secured (encrypted) using the ssl/tls protocol
describe HTTPS
tells how to encode form data when the form method is ‘post’ (most commonly this is used to allow PHP, which you will encounter in Block 2, to accept file uploads).
describe the
enctype
attribute of the html form element
using this tag increases the accessibility of form fields by:
1.This will be read by screen readers
2.This itself acts as selectable so elements such as a radio button have a higher hit area
why should the <.label> tag be used with form fields to increase accessibility
give 2 reasons
this is used to define where the form will be sent such as to a script on a server
describe the action attribute of the html form element
this attribute can be used to have radio button selected by default
in the context of a html radio button describe the
** checked attribute**
describe how the html
type=”reset”
of the input tag works
Often ommited but can be used to reset all the form data back to there default values
describe the following markup
<.input type=”hidden” name=”a_name” value=”a_value” />
what is the markup to:
1. create a hidden field
2. give it a unique identification of “a_name”
3. give it a default value of “a_value”
this attribute specifies the maximum number of characters allowed in an input field.
describe the
maxlength attribute
of the html input tag
this is done using
<.form></.form>
how do we create a html form element
how can we divide our form up into sections
this can be accomplished by:
<.fieldset>
<.legend>Personalia:</.legend>
<.input>
…
…
</.fieldset>
**explained** <.fieldset> - this creates a boxing around our inputs <.legend> - this creates a legend for the boxed section
this can be accomplished using:
<.input type=”file” name=”upload1”/>
how do we create a
file upload button
in html
when this is being used the form element must have
enctype=”multipart/form-data”
this is required in the form element when submitting files. This tells the server to expect one or more attached files
what is required in the form element when using the input type “file”
this provides an initial value for the input tag
describe the
value attribute
of the html input tag
what 2 methods can be used to bound a <.label> tag to a <.input> tag
this can be accomplished by:
1.<.label for=”ID of input”><./label>
2.Nesting the input inside the label
what is the markup to
create a radio button
the markup is:
<.input type=”radio”>
describe the global attribute
tabindex
this can be used to control the flow of focus when the keyboard is being used
When the form is submitted using this method the name/value pairs are appended to the url after a question mark (?)
NOTE: this method is insecure
describe how a form is submitted when the method is GET
in the context of a html radio button describe the
name attribute
this attribute when used with a radio button defines the group it belongs to (if this is selected other members of the group are deselected)
this can be used to control the flow of focus when the keyboard is being used
describe the global attribute
tabindex
Its role is to determine which packets should and should not be accepted:
This can occur when a server makes a request to you or even when you request data from a server.
what is the role of a
firewall
how do we create a html form element
this is done using
<.form></.form>
describe how the html
type=”submit”
of the input tag works
this will create a button that when pressed will send the form data to The form-handler which is specified in the form’s action attribute.
this can be accomplished using:
Password: <.input type=”password” name=”password” />
how would we
create a password field
in a html form
describe the
accept-charset
attribute of the html form element
a comma-separated list of character sets the form data may be in (in practice the server will accept the character set defined in the header of the document)
this can be accomplished by:
1.<.label for=”ID of input”><./label>
2.Nesting the input inside the label
what 2 methods can be used to bound a <.label> tag to a <.input> tag
Can be used within a form to collect data from the user
NOTE: this is an empty element for it to be XML compliant we need to self close it
describe the tag
<.input>
a simple usage scennerio would be:
1.User submits form data
2.Form data sent to server via HTTP along with url denoting CGI script
3.Web server launches the CGI script and passes it the form data
4.The output of the CGI script (usually html) can then be sent back to the client
in 4 steps give a typical usage scenerio of
Common gateway interface (CGI)
this is a specification that allows web servers to execute an external program such as a script. This specification has standards on how data is received and sent
describe breifly the
Common gateway interface (CGI)
its primary role is to prove that a server can be trusted. when a client receives this it can check that it was signed by a trusted CA
this also holds the servers public key
what is the role of an
ssl certificate
in 4 steps give a typical usage scenerio of
Common gateway interface (CGI)
a simple usage scennerio would be:
1.User submits form data
2.Form data sent to server via HTTP along with url denoting CGI script
3.Web server launches the CGI script and passes it the form data
4.The output of the CGI script (usually html) can then be sent back to the client
describe the
value attribute
of the html input tag
this provides an initial value for the input tag
describe the tag
<.input>
Can be used within a form to collect data from the user
NOTE: this is an empty element for it to be XML compliant we need to self close it
this can be accomplished by the following:
<.select name=”cars” id=”cars”>
<option>Volvo</option>
<.option value=”saab”>Saab</.option>
<.option value=”opel”>Opel</.option>
<.option value=”audi”>Audi</.option>
</.select>
how can we
create a drop down box
in html
in the context of a html radio button describe the
** checked attribute**
this attribute can be used to have radio button selected by default
this will create a button that when pressed will send the form data to The form-handler which is specified in the form’s action attribute.
describe how the html
type=”submit”
of the input tag works
defines the type of input such as text or email
describe the
type
attribute of the html input element
describe the following markup
<.input type=”radio” name=”contact” value=”phone” checked=”true” />
what is the markup to create a radio button that:
1. belongs to the group contact
2. has a form value of phone
3. and is checked by default
describe breifly the
Common gateway interface (CGI)
this is a specification that allows web servers to execute an external program such as a script. This specification has standards on how data is received and sent
how do we
create checkboxes
in html
this can be accomplished using
<.input type=”checkbox” name=”literature” />
this is the value of the radio button that will be sent to the server
in the context of a html radio button describe the
value attribute
how would we create a
username field
in a HTML form
this can be accomplished using:
Username: <.input type=”text” name=”user” />
what is the markup that:
1. create a reset button
2. give it a unique identifier of reset
3. give the button text that says “reset”
describe the following markup
<.input type=”reset” name=”reset” value=”Reset” />
these include:
1.Source address
2.Destination address
3.Protocols being used
4.Port numbers
name 4 criteria a firewall may take into account when deciding an action for a packet
this will obscure the password on the screen only
it does not obscure
1. the password if placed in html source code
2. the password if it is sent in the browser URL using a GET request
3. the password using a POST request without HTTPS
what does the type=”password” of input 1. obscure
2. not obscure
this can be accomplished using
<.input type=”checkbox” name=”literature” />
how do we
create checkboxes
in html
give 3 reasons why we might want to use hidden fields in a html form
reasons for using this include:
1.Hold extra information about the user
2.Hold information about where they are posting on the site
3.Use to carry information over multi page forms
in the context of a html radio button describe the
value attribute
this is the value of the radio button that will be sent to the server
describe the
maxlength attribute
of the html input tag
this attribute specifies the maximum number of characters allowed in an input field.
This tag can be used within a form to allow the user to enter multi line data such as an address or a comment or review. Any initial value can be supplied within the element itslef (ie between the tags)
describe the html tag
<.textarea></.textarea>
what is the markup to create a radio button that:
1. belongs to the group contact
2. has a form value of phone
3. and is checked by default
describe the following markup
<.input type=”radio” name=”contact” value=”phone” checked=”true” />
how do we create a
file upload button
in html
this can be accomplished using:
<.input type=”file” name=”upload1”/>
this attribute specifies the visible width, in characters, of an input field.
describe the
size attribute
of the html input tag
describe the functionality of a hidden field in a html form
This can be used to create a hidden field within the form that is not seen by the user. Although it will be submitted with the form.
a comma-separated list of character sets the form data may be in (in practice the server will accept the character set defined in the header of the document)
describe the
accept-charset
attribute of the html form element
reasons for using this include:
1.Hold extra information about the user
2.Hold information about where they are posting on the site
3.Use to carry information over multi page forms
give 3 reasons why we might want to use hidden fields in a html form
describe the following markup
<.input type=”submit” name=”submit” value=”Submit” />
this markup will create a submit button that:
1. has a name that identifies it as “submit”
2. has text on the button itself saying submit
this markup will create a submit button that:
1. has a name that identifies it as “submit”
2. has text on the button itself saying submit
describe the following markup
<.input type=”submit” name=”submit” value=”Submit” />
how can we
create a drop down box
in html
this can be accomplished by the following:
<.select name=”cars” id=”cars”>
<option>Volvo</option>
<.option value=”saab”>Saab</.option>
<.option value=”opel”>Opel</.option>
<.option value=”audi”>Audi</.option>
</.select>
name 4 criteria a firewall may take into account when deciding an action for a packet
these include:
1.Source address
2.Destination address
3.Protocols being used
4.Port numbers
the markup is:
<.input type=”radio”>
what is the markup to
create a radio button
what is a
query string
this is the name/value data in the url after the ? and is seen when the http get method is used to send form data
why should the <.label> tag be used with form fields to increase accessibility
give 2 reasons
using this tag increases the accessibility of form fields by:
1.This will be read by screen readers
2.This itself acts as selectable so elements such as a radio button have a higher hit area
a disadvantage of this is that Every form returned to the server requires a new process to be created for the CGI script
what is a disadvantage of
Common gateway interface (CGI)
Often ommited but can be used to reset all the form data back to there default values
describe how the html
type=”reset”
of the input tag works
describe the
method
attribute of the html form element
This defines the HTTP request method we would like to use such as GET or POST
describe the
enctype
attribute of the html form element
tells how to encode form data when the form method is ‘post’ (most commonly this is used to allow PHP, which you will encounter in Block 2, to accept file uploads).
how would we
create a password field
in a html form
this can be accomplished using:
Password: <.input type=”password” name=”password” />
describe how a form is submitted when the method is POST
When using this method the data is passed to the server within the HTTP request and if HTTPS is in use the data will be encrypted
NOTE: only secure if HTTPS is in use
describe the
type
attribute of the html input element
defines the type of input such as text or email
describe how a form is submitted when the method is GET
When the form is submitted using this method the name/value pairs are appended to the url after a question mark (?)
NOTE: this method is insecure
what is required in the form element when using the input type “file”
when this is being used the form element must have
enctype=”multipart/form-data”
this is required in the form element when submitting files. This tells the server to expect one or more attached files
describe the
size attribute
of the html input tag
this attribute specifies the visible width, in characters, of an input field.
When using this method the data is passed to the server within the HTTP request and if HTTPS is in use the data will be encrypted
NOTE: only secure if HTTPS is in use
describe how a form is submitted when the method is POST
what is the role of an
ssl certificate
its primary role is to prove that a server can be trusted. when a client receives this it can check that it was signed by a trusted CA
this also holds the servers public key
describe HTTPS
this is HTTP but is secured (encrypted) using the ssl/tls protocol
This can be used to create a hidden field within the form that is not seen by the user. Although it will be submitted with the form.
describe the functionality of a hidden field in a html form
what does the type=”password” of input 1. obscure
2. not obscure
this will obscure the password on the screen only
it does not obscure
1. the password if placed in html source code
2. the password if it is sent in the browser URL using a GET request
3. the password using a POST request without HTTPS
