Formuláre a CSSForms and CSS

Last week your page got content. Today it gets its looks — and a form that we will connect to PHP in a few weeks. Everything you need is on this page; the W3Schools links are extra, for when you want more.

What CSS is and how to attach it

HTML says what the content is; CSS (Cascading Style Sheets) says how it should look. Styles can be written in three places: directly in an element’s style attribute (inline), in a <style> tag in the page head, or in a separate file. We use a separate file css/style.css only — one file styles all pages of the site and you make changes in one place. The head of every page gets:

<link rel="stylesheet" href="css/style.css">

More: W3Schools: CSS How To

Element selectors

A CSS rule has the form selector { property: value; }. The selector picks the elements the rule applies to. The simplest selector is a tag name — it hits all its occurrences on every page that attaches the stylesheet.

More: W3Schools: CSS Selectors

Class

A class marks any group of elements that should look the same — no matter what tags they are. In HTML it is the class attribute, in CSS the class selector is written with a dot. One class can be on many elements and one element can have several classes (separated by spaces): class="zvyraznene aktualne".

More: W3Schools: The class Selector

The id — and when to use which

An id marks one specific element: each id may appear on a page only once. In CSS it is written with a hash #. Rule of thumb: style with classes, keep id for unique elements — it is also useful for anchors in the URL (form.html#kontakt) and in a few weeks in JavaScript, when you need to grab exactly one element.

More: W3Schools: The id Selector

The box model

Every element on a page is a rectangle with four layers: content → padding (inner spacing) → border → margin (outer spacing from the surroundings). When something is “off by a few pixels”, it is almost always the box model. You will look at it drawn in the browser via F12 (below).

More: W3Schools: CSS Box Model

Positioning

Normally elements follow each other as written in the HTML (position: static). The other values change that:

Page content is centred by limiting its width: max-width + margin: 0 auto (Example 2).

More: W3Schools: CSS Position

The :hover and :focus pseudo-classes

A pseudo-class styles the state of an element: :hover applies when the mouse is over it, :focus when a form field is active (you clicked into it or reached it with Tab). This is what brings a page to life — and :focus also matters for accessibility: the user sees where they are typing.

More: W3Schools: CSS Pseudo-classes

The form

A form collects data from the visitor. Remember two things right away:

• label says what belongs in a field; its for attribute points to the field’s id, so clicking the label activates the field.
• name is the name under which the value leaves the page. In a few weeks we will pick these values up in PHP exactly by their name — so no field may be missing one.

method="get" appends the submitted data to the URL: after submitting, look at the address bar and you will see your data there. Common field types: text, email, number, date, select (drop-down), radio (one option of several — the group shares one name), checkbox, textarea, a submit button. The whole form is in Example 3.

More: W3Schools: HTML Forms

Explore CSS in the browser (F12)

Press F12 and on the Elements tab (Chrome/Edge) or Inspector (Firefox) click any element: on the right you see all the rules that apply to it; the crossed-out ones lost to a stronger rule, and each shows which file and line it came from. Below you will find the element’s box model drawn with real values. This is your main tool for debugging CSS.

Example 1: selectors, a class and an id

h2 { color: #a3274f; }                   /* all h2 headings */
h1, h2 { font-family: Georgia, serif; }  /* several selectors at once */
nav a { text-decoration: none; }         /* only links inside nav */

.zvyraznene { background-color: #f3e1e8; }   /* class: a dot */
#kontakt { border-top: 3px solid #a3274f; }  /* id: a hash */

<p class="zvyraznene">An important paragraph.</p>
<section id="kontakt"> ... </section>

Example 2: box model, positioning and centring

img {
  padding: 4px;                  /* space between content and border */
  border: 2px solid #a3274f;     /* the border */
  margin: 16px;                  /* space from surrounding elements */
  max-width: 100%;               /* the image must not overflow the page */
}

nav { position: fixed; top: 0; left: 0; right: 0; }
body { padding-top: 60px; }      /* so the pinned menu does not cover content */

.sekcia { position: relative; }  /* the anchor */
.sekcia .stitok { position: absolute; top: 8px; right: 8px; }

main { max-width: 800px; margin: 0 auto; }   /* centring the content */

nav a:hover { background-color: #a3274f; color: white; }
input:focus, textarea:focus { outline: 2px solid #a3274f; }

Example 3: a form with all the common fields

<form method="get">
  <label for="meno">Name</label>
  <input type="text" id="meno" name="meno">

  <label for="email">E-mail</label>
  <input type="email" id="email" name="email">

  <label for="pocet">Count</label>
  <input type="number" id="pocet" name="pocet" min="1">

  <label for="termin">Date</label>
  <input type="date" id="termin" name="termin">

  <label for="kategoria">Category</label>
  <select id="kategoria" name="kategoria">
    <option>first</option>
    <option>second</option>
    <option>third</option>
  </select>

  <fieldset>
    <legend>Rating</legend>
    <label><input type="radio" name="hodnotenie" value="1"> good</label>
    <label><input type="radio" name="hodnotenie" value="2"> better</label>
    <label><input type="radio" name="hodnotenie" value="3"> best</label>
  </fieldset>

  <label><input type="checkbox" name="suhlas"> I agree</label>

  <label for="sprava">Message</label>
  <textarea id="sprava" name="sprava"></textarea>

  <button type="submit">Send</button>
</form>

After submitting, look at the address bar: form.html?meno=Jana&email=... — exactly these name=value pairs will be read by PHP in a few weeks.

Example 4: an AI prompt for a two-page website

You do not write the site by hand, you brief an AI. A good prompt says precisely what you want to get:

Create a simple two-page website in HTML5 (set lang to the page language,
UTF-8 encoding) with one separate stylesheet. No JavaScript and no frameworks
(no Bootstrap).

File structure, exactly like this:
- index.html
- form.html
- css/style.css (the only place with styles, no inline styles and no <style>)
- img/obrazok.jpg (I will supply the image)

index.html contains:
- a header with an h1 heading and a horizontal menu linking to index.html and
  form.html (the same menu on both pages),
- at least two sections with h2 headings and paragraphs, one section has an id,
- the image img/obrazok.jpg with an alt attribute,
- a footer with my name and the year.

form.html contains the same menu and a form with method="get" (no processing
yet — we will connect it to PHP later, so EVERY field must have a name
attribute and its own label):
- a text field (name), an e-mail (type="email"), a number (type="number"),
  a date (type="date"),
- a select with at least three options,
- a group of three radio buttons sharing one name,
- two checkboxes,
- a textarea for a message,
- a submit button.

CSS in css/style.css: readable font, content width limited and centred with
max-width and margin auto, coloured headings, menu items side by side, form
styling (fields below each other, label above the field, spacing), the image
must not overflow the page. Use element selectors, at least one class and at
least one id selector.

Add short comments to both the HTML and the CSS for every block, explaining
what it does and why — I learn from them.

Website topic: [FILL IN your project topic]

Why the prompt is written this way:

• the exact file structure: the css/ and img/ folders teach you order and the URL on sigma stays clean,
• no inline styles: all CSS is in one place — that is what makes it editable and debuggable,
• name and label on every field: we will connect the form to PHP in a few weeks and without name no data would arrive,
• comments in the code: you can read and explain the code — that is what you will do at the defence,
• your project topic: everyone gets a different site.

When the result is not right, do not rewrite the whole prompt. Tell the AI what exactly to fix, for example: “The menu items are not side by side, fix the CSS.”

You also get the tasks as the assignment cv02 in Classroom 50, in the README.md file in your repository.

Link to the assignment cv02: accept the assignment
(valid for B. Stehlíková’s groups; other groups get the link from their own teacher)

code-server --install-extension Natizyskunk.sftp --install-extension yandeu.five-server --install-extension bmewburn.vscode-intelephense-client --install-extension mblode.twig-language-2