CS 511-Web Engineering

Week 4

Topic 36-38

CS 511- Week 4-Topic 36-38
CS 511- Week 4-Topic 36-38


Topic 36:

Introducing Forms:


Forms provide users with a way to interact with a web server by submitting data. They are used for various purposes, such as user registration, login forms, search boxes, feedback forms, and more.


How Forms Work:

The process begins when a user requests an HTML page that contains a form. The form consists of input fields, checkboxes, radio buttons, dropdown menus, and other elements that allow the user to enter or select data. After the user fills out the form, they need to submit the data back to the server. This is typically done by clicking a submit button, but it can also be achieved using JavaScript to trigger form submission.


Query Strings:

When a form is submitted, the browser collects the user's input data and packages it into a query string. Each input field in the form is represented by a name-value pair, where the name is the identifier of the input field and the value is the data entered by the user.


GET and POST:

The method attribute in the form element specifies how the data will be transmitted from the browser to the server. There are two methods commonly used: GET and POST.

1. GET:

  • With the GET method, the form data is appended to the URL of the request.
  • The data is visible in the address bar of the browser.
  • It can be bookmarked and stored in the browser's history and cache.
  • There is a limit on the amount of data that can be sent through a GET request.
  • GET is commonly used for retrieving data from the server or performing searches.POST:
  • With the 
2. POST method, the form data is included in the body of the HTTP request.
  • The data is not visible in the address bar.
  • It is not stored in the browser's history, cache, or bookmarks.
  • There is no limit on the amount of data that can be sent through a POST request.
  • POST is commonly used for submitting sensitive data like passwords or when a large amount of data needs to be sent.

Advantages and Disadvantages:

  • GET requests are advantageous during development as the data is easily visible in the address bar, but it can be a security risk in production.
  • GET requests store data in the browser's history and cache, which can be beneficial or a privacy concern on public computers.
  • POST requests hide the data from the user and provide more security.
  • POST requests do not store the submitted data in the browser's history, cache, or bookmarks.

In summary, forms are an essential component of web applications, allowing users to submit data to servers for processing. The choice between using the GET or POST method depends on factors such as data visibility, security, and the amount of data being transmitted.


Topic 37:

Form Control Elements:

Forms in HTML often require various types of input from users, such as text input, choice selection, and button actions. Here are the different form control elements available in HTML:


Text Input Controls:

  1. Text: Creates a single-line text entry box. Example: <input type="text" name="title" />
  2. Textarea: Creates a multiline text entry box. Example: <textarea rows="3" ... ></textarea>
  3. Password: Creates a single-line text entry box for password input. Example: <input type="password" ... />
  4. Search: Creates a single-line text entry box suitable for a search string. Example: <input type="search" ... />
  5. Email: Creates a single-line text entry box suitable for entering an email address. Example: <input type="email" ... />
  6. Tel: Creates a single-line text entry box suitable for entering a telephone number. Example: <input type="tel" ... />
  7. URL: Creates a single-line text entry box suitable for entering a URL. Example: <input type="URL" ... />

Datalist:

The <datalist> element is a new addition in HTML5. It allows you to define a list of elements that can appear in a dropdown autocomplete style list for text input.


Choice Controls:

  1. Select Lists: The <select> element creates a multiline box for selecting one or more items. Options can be displayed in a dropdown list or as multiple rows. Example: <select>...</select>
  2. Radio Buttons: Radio buttons are used when the user needs to select a single item from a small list of choices. All choices are visible, and only one can be selected. Example: <input type="radio" ... />
  3. Checkboxes: Checkboxes are a form control element used to obtain yes/no or on/off responses from users. They provide a way for users to select multiple options simultaneously. The checkbox element in HTML is used to create checkboxes.

Button Controls:

HTML provides different types of buttons for specific purposes:

  1. Submit: Creates a button that submits the form data to the server. Example: <input type="submit" ... />
  2. Reset: Creates a button that clears any previously entered form data. Example: <input type="reset" ... />
  3. Button: Creates a custom button that can be styled using CSS. It may require JavaScript to act. Example: <button type="button" ... ></button>
  4. Image: Creates a custom submit button that uses an image for its display. Example: <input type="image" ... />

In summary, HTML provides a variety of form control elements that allow users to input and select data. These elements help create interactive and user-friendly forms on web pages.


Topic 38:

Date and Time controls in HTML allow users to input date and time values. These controls provide a convenient way to gather specific information related to dates, times, months, and weeks. Here are the different types of Date and Time controls:

1. Date: The date input control creates a text box or a date picker where users can enter or select a specific date. The format for the date is typically "yyyy-mm-dd" (year-month-day).

Example: <input type="date" name="date" />

2. Time: The time input control creates a text box or a time picker for users to input or select a specific time. The format for the time is typical "HH:MM: SS" (hours:minutes: seconds).

Example: <input type="time" name="time" />

3. Month: The month input control allows users to input or select a specific month and year. The format for the month is typically "yyyy-mm" (year-month).

Example: <input type="month" name="month" />

4. Week: The week input control enables users to input or select a specific week in a year. The format for the week is typically "yyyy-W##" (year-week number).

Example: <input type="week" name="week" />

These Date and Time controls provide a standardized way for users to input specific temporal values. They can be used in various scenarios, such as event scheduling, booking forms, or any application that requires gathering date and time information. By using these controls, developers can ensure consistent formatting and improve the user experience when interacting with date and time-related data.

Assessment:

CS 511- Week 4-Topic 36-38
CS 511- Week 4-Topic 36-38


Which HTTP method is commonly used for retrieving data from the server or performing searches? 
a) GET 
b) POST
Answer: a) GET

Which HTML form control element is used to create a multiline text entry box? 
a) Text 
b) Textarea 
c) Password 
d) Search
Answer: b) Textarea

Which HTML form control element is used to obtain yes/no or on/off responses from users? 
a) Text 
b) Radio button
c) Checkbox 
d) Button
Answer: c) Checkbox

Which HTML form control element is used to create a button that submits the form data to the server? 
a) Submit 
b) Reset 
c) Button 
d) Image
Answer: a) Submit

What is the format for the date input control in HTML? 
a) mm-dd-yyyy 
b) dd-mm-yyyy 
c) yyyy-mm-dd 
d) mm-yyyy-dd
Answer: c) yyyy-mm-dd

THE END 😊