Forms
Web Basics — HTML & CSS Lesson 10 2:08 English narration · English + 中文 subtitles burned in
Chapters
Transcript
Everything you have made so far is something to read.
到目前为止你做的一切，都是给人读的。
A form is different: it is something a visitor uses.
表单不一样：它是给访客用的。
Write an input with type text and you get a real box on the page, one somebody can click into and type in.
写一个 type 为 text 的 input，页面上就出现一个真正的框， 别人可以点进去输入。
And notice it is another single tag, like img and br.
再注意，它又是一个单标签，和 img、br 一样。
There is nothing to put between two tags, because the visitor supplies the content, not you.
没有什么东西需要放在两个标签之间， 因为内容是由访客提供的，不是你。
That word text is doing real work.
"text" 这个词在真正起作用。
Input is one tag that becomes many different controls, and the type attribute decides which.
input 是一个能变成许多不同控件的标签， 而由 type 属性决定它变成哪一个。
Type text is ordinary typing.
type 是 text，就是普通的输入。
Type password hides what is typed behind dots.
type 是 password，输入的内容会被小圆点遮住。
Type checkbox is not a box for words at all — it is a tick box.
type 是 checkbox，它根本不是用来写字的框——而是一个勾选框。
Same tag, different attribute, completely different thing on the page.
同一个标签，不同的属性，页面上就是完全不同的东西。
A form is usually three things together.
一个表单通常是三样东西凑在一起。
A label says what the box is for.
label 说明这个框是干什么用的。
The input is the box itself.
input 就是那个框本身。
And a button is something to click when you are done.
而 button 是填完之后可以点的东西。
A button is a pair, unlike the input — the words you write between its tags are the words on the button, so change them and the button says something else.
和 input 不同，button 是成对的—— 你写在它两个标签之间的字，就是按钮上的字， 改掉它，按钮说的话就变了。
A box on its own is a guess.
孤零零的一个框，只能靠猜。
Nobody can tell whether it wants your name, your email, or a search term — and someone using a screen reader gets nothing at all, because there is nothing to read out.
没人分得清它要的是名字、邮箱，还是搜索词—— 而使用屏幕阅读器的人则什么也得不到，因为没有任何东西可以念。
A label fixes both problems at once: it says what it is for, on screen and out loud.
label 一次解决了这两个问题： 它在屏幕上、也在朗读中说明这个框是做什么的。
Now the two tasks: add a text box, then a button that says Send.
现在做那两道题： 加一个文本框，再加一个写着 "Send" 的按钮。
Four things to take with you.
带走四点。
One: input is a box to type in, and it is a single tag.
第一：input 是一个可以输入的框，而且是单标签。
Two: the type attribute decides which kind of box you get.
第二：type 属性决定你得到的是哪一种框。
Three: button is a pair, and holds its own words.
第三：button 是成对的，按钮上的字写在它里面。
Four: every input deserves a label.
第四：每一个输入框都值得配一个 label。
Now add both to your page.
现在把这两样都加到你的页面上。