summary web programming HTML-P2 chapters (2.3.1,2.3.2,2.4 )

HTML Forms

• used to collect user input. The user input is most often sent to a server for processing.
• <form action = path of the page name to send the data from inside the form target = where to open the data >

Form attributes

• Form Action Attribute:
• The action attribute defines the action to be performed when the form is submitted.
• form data is sent to a → file on the server when the user clicks on the submit button.
• Example: <form action="/action_page.php"> </form>
• Target Attribute:
• The target attribute is used in combination with the action attribute.
• <form action="/action_page.php" target="_blank">
• Specifies where to display the response received after submitting the form.
• Target Attribute Values:
• The default value is _self, meaning the response will open in the current window.
• _blank : send to new page → new tab
• _self : send data of the same page I open it → same tab ( default )
• The Autocomplete Attribute
• The autocomplete attribute specifies whether a form should have autocomplete on or off.
• When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
• <form action="/action_page.php" autocomplete="on">
• autocomplete → auto fill the form using libraries or history of the browser
• by default it’s on → if I want to off an element I only put the off on it

POST vs GET

• Notes on GET:
• Appends the form data to the URL in name/value pairs.
• NEVER use GET to send sensitive data as the submitted form data is visible in the URL.
• The length of a URL is limited (2048 characters).
• GET is suitable for non-secure data, like query strings in Google.
• Notes on POST:
• Appends the form data inside the body of the HTTP request, not shown in the URL.
• POST has no size limitations and can be used to send large amounts of data.
• Tip:
• Always use POST if the form data contains sensitive or personal information.
• GET → send data in the URL → exposed to other
• POST → send data in the body ( under the header line ) → secure not expose to others ( for sensitive data as passwords )

<form> Elements

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
</form>

• <label> Tag:
• Defines a label for many form elements.
• Used in forms for providing text above input boxes like username and password.
• Example: <label for="username">Username:</label> <input type="text" id="username" name="username">
• Benefits of <label> Element:
• Useful for screen-reader users as it is read out loud when the user focuses on the input element.
• Assists users who have difficulty clicking on small regions (e.g., radio buttons or checkboxes) by toggling them when clicking the text within the <label> element.
• Binding <label> and <input>:
• The for attribute of the <label> tag should be equal to the id attribute of the <input> element.
• Ensures a connection between the label and the input element.
• attribute after the tag → action
• element inside the tag → <label>
• name = “value” → name is a variable that holds a data
• id = “value” → a unique ID for that input ( we can use that ID to change it’s style )

• The <input> Element:
• The HTML <input> element is the most used form element.
• It can be displayed in various ways based on the type attribute.
• <input> have no closing
• Examples of <input> Types:
• <input type="text">: Displays a form box where the entered text will be visible.
• <input type="password">: Displays a form box where the entered text is hidden as *******.

<input> Element

• Only used within a FORM element and is denoted by <input>
• Attributes for <input>
1. type: defines the type of data used in the field.
2. name: the name of the particular element.
3. id: a unique identifier for an HTML element.
4. maxlength: the maximum number of characters users can enter in a text field.
• to prevent from the BOF attacks (when no user validation is).
5. required: specifies that an input field must be filled out before submitting the form.
6. size: specifies the size of the field and depends on its type.
• size of the text box.
7. value: contain the initial value displayed to users.
• if I haven’t entered a value will use this value.
8. checked: indicates that a checkbox or radio button is selected.
• with radio button or check box → to be initially checked.
9. disabled: prevents the field from receiving focus.
10. readonly: prevents modification of the contents of the field.

type Attribute

• Text:
• Specifies a single line text entry field.
• <input type="text" id="fname" name="fname">
• Password:
• same as text except the text entered by the user is obscured
• <input type="text" id="username" name="username">
• Checkbox:
• An object where → several values can be selected simultaneously.
• When submitted, the checkbox is sent as → separate name/value pairs for each selected value.
• Checkbox items that are grouped together should have:
• A different name.
• A unique value (or different values).
Copy

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

• Radio Boxes:
• An object that represents an item where only one value can be selected from a set of possibilities.
• A set is defined as a group of radio boxes with the same NAME attribute.
• Only one radio box in a set can be selected at a time.
• To pre-select a radio box, use the checked attribute, but it should never be set for more than one radio box in the same set.
Copy

 <form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

• name will be the same → name="fav_language" → because we have one value to select but the value must be unique not duplication
• Hidden:
• no field is presented to the user.
• Primary use → is record keeping for programs that may parse user input from forms.
• input type="hidden" id="custId" name="custId" value="3487">
• if two pages are identical → page 1 ( employees ) - page 2 ( customers )
• <input type = hidden name = employees value = yes>
• <input type = hidden name = customers value = yes>
• each code will be in different page → so the server will know each page depend on the type = hidden
• Submit - Rest :
• Submit : Used to submit the form’s content, as specified by the action attribute.
• <input type=submit value = "place your order">
• Rest : Set all fields in the form to their initial values.
• <input type=reset value = "start over">
• Button:
• creates a button whose use can be defined through scripting → onClick event.
• Use to create a back button.
• Only useful to browsers that support scripting.
• <form><p><input type=“button” value=“Back to Last Document” onclick=“history.back( )”></p></form>
• button my be as an element or a tag
• as element in <form> → <INPUT TYPE=“button”
• or as a tag → <button>
• Color:
• used for input fields that should contain a color
• Depending on browser support, a color picker can show up in the input field.
• <input type="color" id="favcolor" name="favcolor" value="#ff0000">
• Date:
• used for input fields that should contain a date.
• Depending on browser support, a date picker can show up in the input field.
• You can also use the min and max attributes to add restrictions to dates:
• <input type="date" id="datemax" name="datemax" max="1979-12-31">
• format → max="1979-12-31" → yyyy-mm-dd
• Time:
• defines a control for entering a time (no time zone)
• <input type="time" id="appt" name="appt">
• Email:
• used for input fields that should contain an e-mail address.
• Depending on browser support, the e-mail address can be automatically validated when submitted.
• Some smartphones recognize the email type and add .com to the keyboard to match email input.
• <input type="email" id="email" name="email">
• File:
• file-select field and a Browse button for file uploads
• <input type="file" id="myfile" name="myfile">
• Number:
• numeric input field
• can set restrictions on what numbers are accepted → min - max
• <input type="number" id="quantity" name="quantity" min="1" max="5">
• Select:
• defines a drop-down list
• se the size attribute to specify the number of visible values
• Use the multiple attribute to allow the user to select more than one value → selection by CTRL + value
• When we select a value will be connected with the name so name = value selected
• size = 3 then will show 3 options in the one open list
• The <option> element defines an option that can be selected.
• By default → the first item in the drop-down list is selected.
• To define a pre-selected option → add the selected attribute to the option
Copy

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

• Textarea:
• defines a multi-line input field (a text area):
Copy

<form>
   <lable for="mes1">enter a text:</lable>
  <textarea name="message" id="mes1" rows="10" cols="30">
    The cat was playing in the garden.
  </textarea>
</form>

• The rows attribute specifies the → visible number of lines in a text area.
• The cols attribute specifies the → visible width of a text area.

Video and audio tags

<video width="320" height="240" controls>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
Your browser does not support the video tag
</video>

• <source src=”path” type=”video/type of the video”>
• if we have 2 videos and want to display the second if the first didn’t displayed
• <source src=”path” type=”video/type of the video” src2=”path2” type=”video/type of the video2”>
• we can add 2 videos of the same type but why?? ( but for better results be different type )
• MP4 → video/mp4
• WebM → video/webm
• Ogg → video/ogg

Optional Attributes

• These attributes are for the video expect src and type
• controls:
• Value: controls
• Description: Specifies that video controls should be displayed (such as a play/pause button).
• More Information: Display: <| || |> at the video.
• height:
• Value: pixels.
• Description: Sets the height of the video player.
• loop:
• Value: loop
• Description: Specifies that the video will start over again every time it is finished.
• More Information: The video will be displayed again and again.
• muted:
• Value: muted
• Description: Specifies that the audio output of the video should be muted.
• More Information: By default, muted, but you can enable sound and change it.
• poster:
• Value: URL.
• Description: Specifies an image to be shown while the video is downloading or until the user hits the play button.
• More Information: Example: poster="/images/w.gif". This poster will be displayed initially when you open the video.
• src:
• Value: URL.
• Description: Specifies the URL of the video file.
• More Information: Attribute for the source.
• width:
• Value: pixels.
• Description: Sets the width of the video player.

Audio tag

<audio controls>  
<source src="horse.ogg" type="audio/ogg">
</audio>

• MP3 → audio/mpeg - audio/mped
• WAV→ audio/wav → have larger size
• Ogg → audio/ogg

Optional Attributes

• controls:
• Value: controls
• Description: Specifies that audio controls should be displayed (such as a play/pause button).
• loop:
• Value: loop
• Description: Specifies that the audio will start over again every time it is finished.
• muted:
• Value: muted
• Description: Specifies that the audio output should be muted.
• src:
• Value: URL.
• Description: Specifies the URL of the audio file.
• More Information: Tag with the source attribute.

• we can add autoplay attribute with the video tag or audio tag → so it will play the video by default when the page reload