Week 10 — Forms and Interface Feedback

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Forms, labels, input types, required fields, and interface feedback

Project files and folder structure

Create week-10/index.html and week-10/css/styles.css.

Syntax to practice

<form>, <label for>, matching input id, suitable type, required, <select>, <textarea>, submit button.

Build it

Build a contact/inquiry form with name, email, inquiry type, message, and submit button. Give every control a visible label, mark required fields, and test browser validation. Do not claim data is sent unless a backend is connected.

Code along: Build a labeled form with basic browser validation.

Open in Sublime Text: week-10/index.html

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

<form>
  <label for="name">Your name</label>
  <input id="name" name="name" type="text" required>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5"></textarea>
  <button type="submit">Submit</button>
</form>

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-10/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Form Prototype</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main class="form-panel">
    <h1>Contact us</h1>
    <form>
      <label for="name">Your name</label><input id="name" name="name" type="text" required>
      <label for="email">Email address</label><input id="email" name="email" type="email" required>
      <label for="topic">Project topic</label><select id="topic" name="topic"><option value="">Choose one</option><option>Web design</option><option>Visual identity</option></select>
      <label for="message">Message</label><textarea id="message" name="message" rows="5"></textarea>
      <button type="submit">Review form</button>
    </form>
    <p class="note">Prototype only: this form does not send data.</p>
  </main>
</body>
</html>

CSS file: week-10/css/styles.css

body { margin: 0; padding: 24px; font-family: Arial, sans-serif; background: #f1f5f9; color: #172033; }
.form-panel { max-width: 620px; margin: auto; padding: 24px; background: white; border-radius: 10px; }
label { display: block; margin: 16px 0 6px; font-weight: bold; }
input, select, textarea { box-sizing: border-box; width: 100%; padding: 10px; font: inherit; border: 1px solid #94a3b8; border-radius: 5px; }
button { margin-top: 18px; padding: 12px 16px; border: 0; border-radius: 5px; background: #1d4ed8; color: white; font: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.note { color: #526071; font-size: .9rem; }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Add a select menu and test empty submission and an invalid email. This prototype does not send data without a backend or form service.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• week-10/index.html — at least five controls, visible labels, required fields, submit button.
• week-10/css/styles.css — readable layout and visible keyboard focus.
• week-10/form-test-notes.txt — results for empty required fields, malformed email, and valid-looking input.
• week-10/README.txt — state whether this is a front-end prototype or sends submissions.

Submission checklist

• All controls have matching labels/IDs; validation works; focus visible; form limitations accurately described.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.