AltSchool Of Engineering Tinyuka’24 Month 2 Week 1

We kicked off this week with revision from the last class; Understanding semantic HTML and the importance of prioritizing meaning over appearance, HTML Elements for structuring content, HTML Attribute, HTML Tables and a lot more. You can check it out here Overview of HTML Forms The element in HTML serves as a document landmark that encapsulates interactive controls for gathering and submitting user information. Inside a , you can include various interactive (and non-interactive) elements to create a complete form. Form Creation Forms are initiated using the tag, which contains several interactive controls designed for data submission. Key attributes of the element include: action: This specifies the URL where the form data will be sent for processing. method: This defines the HTTP method used to submit the form, typically either GET or POST. Within the element, you will find various controls, such as: Input fields for text, numbers, or other data types. Radio buttons for selecting one option from multiple choices. Checkboxes for selecting multiple options simultaneously. Submit buttons that facilitate the submission of the form. Additionally, HTML attributes can enforce specific requirements, such as mandatory fields, validation rules, and conditions that must be met before submission is allowed. Form Submission The submission of a form is commonly executed by clicking a submit button. When the button is activated, the form data is transmitted as name/value pairs to the designated URL specified in the action attribute. Example of a Simple Form Here's an example of a basic HTML form: Name: Email: In the above example, the form includes fields for a user's name and email, with the required attribute ensuring that both fields must be filled out before submission. The data will be sent to https://example.com/submit using the POST method when the submit button is clicked. This structured approach helps collect information efficiently while ensuring data integrity. Radio Buttons in HTML Forms Radio buttons are an essential element of HTML forms that allow users to select one option from a predefined group. These buttons are designed to function such that only one can be selected at a time, fostering exclusive choices. Grouping and Selection To achieve this, all radio buttons in a group must share the same name attribute. This ensures that when a user selects one radio button, any previously selected button within the same group is automatically deselected. Each radio button should also have a unique value attribute to distinctly identify the selected option. This uniqueness is vital for processing the form data accurately. Pre-selection and Requirement If you want to have a specific radio button selected by default when the form loads, you can use the checked attribute. To enforce that the user must make a choice from the group before submitting the form, you can add the required attribute to at least one of the radio buttons in the group. This ensures that the form will not be submitted until a selection is made. Example of Radio Buttons Here’s a simple example that demonstrates the above concepts: Choose your favorite fruit: Apple Banana Orange In this example, the form presents a selection of fruits. The radio buttons all share the same name attribute ("fruit"), which allows only one to be selected at any time. The "Orange" option is pre-selected due to the checked attribute, and the required attribute on the "Apple" button mandates that the user must choose a fruit before submitting the form. Checkboxes in HTML Forms Checkboxes are a versatile element in HTML forms that enable users to select multiple options from a set. When checkboxes are grouped with the same name attribute, all selected values are submitted together, allowing for a more flexible choice. Checkbox Selection When creating checkboxes, it’s important to note that if a checkbox does not have a value attribute specified, it will default to "on." This default value may not always be meaningful, so it is often best practice to explicitly define the value attribute for clarity. To ensure that a checkbox is a required selection before form submission, add the required attribute to that particular checkbox. Example of Checkboxes Here’s an example showcasing the use of checkboxes: Select your hobbies: Reading Traveling Cooking In this example, users can select multiple hobbies, with each checkbox having a unique value attribute. Form Labels and Fieldsets Every form control should be paired with a element to enhance accessibility and usability. Labels can be associated explicitly through the for attribute or implicitly by embedding the input control within t

Mar 30, 2025 - 13:39

AltSchool Of Engineering Tinyuka’24 Month 2 Week 1

We kicked off this week with revision from the last class; Understanding semantic HTML and the importance of prioritizing meaning over appearance, HTML Elements for structuring content, HTML Attribute, HTML Tables and a lot more. You can check it out here

Overview of HTML Forms

The

element in HTML serves as a document landmark that encapsulates interactive controls for gathering and submitting user information. Inside a , you can include various interactive (and non-interactive) elements to create a complete form.

Form Creation

Forms are initiated using the tag, which contains several interactive controls designed for data submission. Key attributes of the element include:

action: This specifies the URL where the form data will be sent for processing.
method: This defines the HTTP method used to submit the form, typically either GET or POST.

Within the element, you will find various controls, such as:

Input fields for text, numbers, or other data types.
Radio buttons for selecting one option from multiple choices.
Checkboxes for selecting multiple options simultaneously.
Submit buttons that facilitate the submission of the form.

Additionally, HTML attributes can enforce specific requirements, such as mandatory fields, validation rules, and conditions that must be met before submission is allowed.

Form Submission

The submission of a form is commonly executed by clicking a submit button. When the button is activated, the form data is transmitted as name/value pairs to the designated URL specified in the action attribute.

Example of a Simple Form

Here's an example of a basic HTML form:


  Name:
  

  Email:

In the above example, the form includes fields for a user's name and email, with the required attribute ensuring that both fields must be filled out before submission. The data will be sent to https://example.com/submit using the POST method when the submit button is clicked. This structured approach helps collect information efficiently while ensuring data integrity.

Radio Buttons in HTML Forms

Radio buttons are an essential element of HTML forms that allow users to select one option from a predefined group. These buttons are designed to function such that only one can be selected at a time, fostering exclusive choices.

Grouping and Selection

To achieve this, all radio buttons in a group must share the same name attribute. This ensures that when a user selects one radio button, any previously selected button within the same group is automatically deselected.

Each radio button should also have a unique value attribute to distinctly identify the selected option. This uniqueness is vital for processing the form data accurately.

Pre-selection and Requirement

If you want to have a specific radio button selected by default when the form loads, you can use the checked attribute.

To enforce that the user must make a choice from the group before submitting the form, you can add the required attribute to at least one of the radio buttons in the group. This ensures that the form will not be submitted until a selection is made.

Example of Radio Buttons

Here’s a simple example that demonstrates the above concepts:


  Choose your favorite fruit:
  
    
    Apple
  

  
    
    Banana
  

  
    
    Orange

In this example, the form presents a selection of fruits. The radio buttons all share the same name attribute ("fruit"), which allows only one to be selected at any time. The "Orange" option is pre-selected due to the checked attribute, and the required attribute on the "Apple" button mandates that the user must choose a fruit before submitting the form.

Checkboxes in HTML Forms

Checkboxes are a versatile element in HTML forms that enable users to select multiple options from a set. When checkboxes are grouped with the same name attribute, all selected values are submitted together, allowing for a more flexible choice.

Checkbox Selection

When creating checkboxes, it’s important to note that if a checkbox does not have a value attribute specified, it will default to "on." This default value may not always be meaningful, so it is often best practice to explicitly define the value attribute for clarity.

To ensure that a checkbox is a required selection before form submission, add the required attribute to that particular checkbox.

Example of Checkboxes

Here’s an example showcasing the use of checkboxes:


  Select your hobbies:
  
     Reading
  

  
     Traveling
  

  
     Cooking

In this example, users can select multiple hobbies, with each checkbox having a unique value attribute.

Form Labels and Fieldsets

Every form control should be paired with a element to enhance accessibility and usability. Labels can be associated explicitly through the for attribute or implicitly by embedding the input control within the tags. Proper labelling increases the clickable area, making forms easier to navigate.

For grouping related controls — like radio buttons or checkboxes — the

element can be used. This element helps to visually and semantically organize groups of controls. A element can provide a label for that group.

Example of Fieldset and Legend

Here’s a brief example that incorporates

and :


  
    Select your favourite fruits:

    
       Apple
    

    
       Banana
    

    
       Orange

In this example, the checkboxes for selecting favourite fruits are grouped within a

, while the provides a descriptive title for the group, enhancing both usability and accessibility for users.

HTML Input Types and Dynamic Keyboards

HTML provides a range of 22 different input types, each tailored for specific kinds of data entry such as text, email, URL, telephone numbers, dates, and more. These input types enhance the user experience by streamlining the data entry process.

Dynamic Keyboards for Mobile Devices

On devices equipped with dynamic keyboards, like smartphones and tablets, the specified input type significantly influences the keyboard layout displayed to the user. For example, setting an input type to "email" will trigger a keyboard optimized for entering email addresses, complete with the "@" symbol and ".com" key. This targeted approach not only speeds up data entry but also reduces the likelihood of input errors.

Accessing the Microphone and Camera

The element plays a crucial role in allowing users to upload files. The accept attribute can be utilized to restrict uploads to specific file types. For example, you can set accept="image/*" to allow only image file uploads.

Additionally, the capture attribute can be utilized to enable users to directly capture media from their device’s camera or microphone. By setting capture to "user" or "environment," users can create new media files directly within a form without needing a separate file upload.

Example of Input Types and Media Capture

Here’s a practical example demonstrating these features:


  Email:
  

  Phone:
  

  Upload an image:

In this example:

The email field prompts a keyboard optimized for email entry.
The telephone field ensures users have a phone number-friendly keyboard layout.
The file input allows image uploads directly from the camera or stored files, enhancing user convenience and workflow.

Built-in Validation in HTML Forms

HTML offers various attributes that facilitate built-in validation for form controls, ensuring that the submitted data adheres to specified criteria. Key attributes include required, pattern, min, max, minlength, and maxlength, each serving distinct purposes for validating user inputs.

Client-Side Constraint Validation

When users attempt to submit a form, the browser automatically performs client-side validation checks, ensuring that the entered values conform to the defined validation rules. If any values do not meet the criteria, the form submission is halted, and the user is presented with an error message focused on the first invalid form control. This immediate feedback helps users correct their inputs effectively.

Styling Validation States

To enhance usability, CSS pseudo-classes such as :valid, :invalid, :focus, and :required can be applied to style form controls based on their validation status. For example, you might change the border colour of input fields to green when valid and red when invalid, providing visual cues to users regarding their input.

Custom Validation Messages with JavaScript

For a more tailored user experience, JavaScript can be leveraged to create custom error messages that offer specific guidance during the validation process. JavaScript can also produce dynamic updates to form controls, enhancing interactivity.

Example of Form Validation

Here’s a simple example illustrating built-in validation:


  Username (min 5 characters):
  

  Email:
  

  Age (between 18 and 100):

In this example:

The username field requires a minimum of 5 characters.
The email field must be filled out according to email format.
The age field restricts input between 18 and 100.

If any field does not meet its validation criteria, the form will not submit, and the browser will prompt the user to correct their entries.

HTML Image Syntax

Images play a crucial role in enhancing the design and visual appeal of a web page. They can effectively capture user attention and convey information more engagingly.

The Tag in HTML

To incorporate images into a web page, the HTML tag is utilized. Rather than embedding images directly, the tag creates a designated space for the image by linking to its source. Essentially, the image is referenced rather than stored within the HTML document itself.

Characteristics of the Tag

A key feature of the tag is that it is an empty element; it does not have a closing tag and contains only attributes. This simplistic structure allows for straightforward image inclusion.

Required Attributes

The tag necessitates two essential attributes:

src: This attribute defines the path to the image file, whether it’s a relative URL or an absolute URL. For example, specifies that the image is located in the "images" folder.
alt: The alt attribute provides descriptive alternative text for the image. This text is crucial for accessibility, as it is displayed when the image cannot be loaded and is read by screen readers for visually impaired users. For instance,

offers context about the image when it cannot be viewed.

Example of Using the Tag

Here’s a practical example of how to use the tag in HTML:

In this example, the tag points to an image of a sunset while providing a textual description for accessibility.

Element in HTML

The element is a powerful tool in HTML that enables developers to provide different image versions optimized for various display scenarios and devices. This element is designed to enhance responsiveness and improve load times by allowing the browser to select the most appropriate image based on the user’s environment.

Structure of the Element

Inside a element, multiple elements can be included, along with a single element. The elements provide alternative image sources, and the browser evaluates each source to determine which one best fits the current display conditions. If none of the specified conditions are met, the browser defaults to the image defined in the src attribute of the element.

Media Conditions and Source Selection

The media attribute on a element functions like a media query, specifying when that particular source should be applied. If the media condition evaluates to true, the browser will use that source. For example:

In this example, if the viewport is 600 pixels wide or less, image-small.jpg will be selected. For viewports up to 1200 pixels, image-medium.jpg is chosen. If neither condition is satisfied, the image displayed will be image-large.jpg.

Utilizing srcset for Display Scenarios

The srcset attribute can also be employed to define various image sources tailored for different display conditions, including resolutions. It uses width descriptors (w) and pixel density descriptors (x) to guide the browser in selecting the optimal image. For example:

In this case, the browser will choose either image-500w.jpg or image-1000w.jpg based on the display size, ensuring that users receive an appropriately sized image for their device.

MIME Type Support

Additionally, the type attribute in a element specifies the MIME type of the resource. The browser will only utilize the source if it supports the indicated MIME type, allowing for better compatibility.

If you have read all the way to this point thank you So much! I do appreciate the effort. Do well to try all this out at your earliest convenience, as practice makes us better developers. Also feel free to share your thoughts in the comments section below.

I am Ikoh Sylva a Cloud Computing Enthusiast with few months hands on experience on AWS. I’m currently documenting my Cloud journey here from a beginner’s perspective. If this sounds good to you kindly like and follow, also consider recommending this article to others who you think might also be starting out their cloud journeys to enable us learn and grow together.

You can also consider following me on social media below;
LinkedIn Facebook X