Materi HTML #7

Summary

This video tutorial covers key concepts in HTML, focusing on creating and managing HTML forms. The instructor walks through adding various form inputs such as name, age, and password, and explains the differences between button types—'submit' and 'reset'—using both the `<button>` and `<input>` tags. Additionally, the tutorial explores how to create hyperlinks to external websites like Google and internal files within a project. The lesson emphasizes clarity in HTML form creation and linking, offering a valuable resource for those preparing for exams or enhancing their web development skills.

Takeaways

• 😀 The lesson is focused on HTML, particularly form elements, buttons, and hyperlinks.
• 😀 Students are encouraged to review all videos from start to finish before their UAS (final exam).
• 😀 The teacher emphasizes the importance of asking questions if something is unclear.
• 😀 The form includes various input types like text, number, password, and reset buttons.
• 😀 There is a distinction between the `<button>` and `<input>` tags in HTML for creating buttons, with `input` being more common for form submissions.
• 😀 The teacher demonstrates how to create buttons with two types: submit (`input type='submit'`) and reset (`input type='reset'`).
• 😀 An example is given for creating hyperlinks using the `<a>` tag to navigate to external websites like Google or YouTube.
• 😀 To make sure hyperlinks work properly, the `https://` protocol is required in URLs for them to function correctly.
• 😀 The teacher provides an example of linking to local files (e.g., `form.php`) using the `<a>` tag.
• 😀 There is a reminder for students to thoroughly understand the differences between `button` and `input` for future database and form-related tasks.
• 😀 The teacher concludes by wishing the students success in their upcoming exams and possibly offering more video lessons in the future.

Q & A

What are the two types of buttons used in HTML forms according to the tutorial?

The two types of buttons discussed are: 1) `<button>` tag for custom actions like JavaScript, and 2) `<input>` tag with type 'submit' or 'reset' for form submission and clearing the form.

What is the difference between the `<button>` tag and the `<input>` tag with type 'submit'?

The main difference is that the `<button>` tag can be used with JavaScript for custom actions, while the `<input>` tag with type 'submit' is specifically for submitting a form. The `<input>` tag is more commonly used in database-driven applications.

Why is the `<input>` tag with type 'submit' more commonly used for form submission when working with databases?

The `<input>` tag with type 'submit' is preferred because it sends the form data in a format that is easily processed by back-end systems, especially in database-driven applications. It is standardized and more widely supported for form processing.

How do you create a link to an external website in HTML?

To create a link to an external website, you use the `<a>` (anchor) tag with the 'href' attribute. For example, `<a href='https://www.google.com'>Go to Google</a>` will link to Google's homepage.

What could go wrong if you don’t include 'https://' when linking to an external site?

If 'https://' is not included, the link may not function properly, especially if it is meant to direct the user to a secure website. The browser might treat the link as relative or fail to resolve the URL correctly.

What is the purpose of the 'reset' button in an HTML form?

The 'reset' button is used to clear all the form fields, resetting them to their default values. It is created using `<input type='reset'>`.

Can you link to a local file using the `<a>` tag? How?

Yes, you can link to a local file using the `<a>` tag by specifying the path to the file in the 'href' attribute. For example, `<a href='form.php'>Go to Form</a>` links to a local PHP file.

What did the instructor emphasize about the usage of 'https://' in links?

The instructor emphasized that when linking to external websites, it is important to include 'https://' in the URL to ensure that the link works properly. For example, 'https://www.google.com' instead of just 'google.com'.

What should students do if they don't understand a concept from the tutorial?

The instructor encourages students to ask questions and seek clarification, either by directly asking them or through additional resources provided in the course.

What additional resources does the instructor promise to provide if time permits?

The instructor mentioned that if time allows, they may create more videos on other topics, not just HTML, to continue helping students with their learning.