1. Basic Concepts

Web forms are one of the most important ways to let users upload their information to the server. A web form is usually a composition of several input widgets nested in <fieldset> or <div> elements.

Here are some main elements used in web forms:

• <form></form>: The wrapper of the whole form.
• <fieldset></fieldset>: used to separate different form sections
• <legend></legend>: the title of the form
• <input />
• <label></label>: the label binding with the input

Usually, a widget consists of a label element and an input element, wrapped by <ul>, <ol>, <p>, or <div>.

Now, let's introduce the web form from the innermost element: input

2. Input element

Here is a wigdet, who has a label and an input

<label for="name">Name: </label>
<input id="name" type="text" placeholder="Enter your name" required />

It looks like this, you could type some text in it:

Besides the 'text' type, it also has many types to adapt to different scenarios. Let's have a look at them one by one.

2.1 Single line input:

There are some 'single line input' elements. It has a variety of types.

• text：文字输入组件，当选中时，移动端将自动弹出26键（或9键）键盘
• tel：电话号码输入组件，当选中时，移动端将自动显示为数字键盘
• url：链接输入组件
• email：电子邮箱输入组件
• search：搜索组件，当输入文字后，将在右侧显示❌，点击后可以清除搜索内容
• password：输入的字符将显示为圆点，但发送时没被加密，建议使用 https 传输加密协议
• hidden：用户不可见，但仍然随着表格一起发送，该输入不应该绑定 label

2.2 Checkboxes and radio buttons

Checkbox

• type: checkbox
• id: id of this checkbox，binding with the label element
• name: the variable name binds with the checkbox
• value: the given value when the box is checked
• checked (optional): is this box checked default

Radio button

same as checkbox

2.3 Actual buttons

The input element also has three special button types: submit, reset, and button.

• submit：a GET request will be sent after click, and the data is uploaded within URL
• reset：reset the whole form
• button：a customized button

2.4 Image button

An image button is similar to an image element, except that, when you click it, it will send a GET request with the mouse's relative position according to the image.

• type: image
• alt: the alternative text when the image is missing
• src: the source of the image
• name: the name of this button
• width: the width of the image
• height: the height of the image

Once you click it, the following request will be sent.

GET http://foo.com?pos.x=123&pos.y=456 HTTP/1.1

2.5 File picker

This is a file picker, the user can upload one or multiple files. Normally, a file picker has the following attributes:

• type: file
• name: the customized name
• accept: accept which type of file
  • "image/*"
  • "video/*"
  • "audio/*"
• multiple (optional): upload multiple files.

3. Summary

In this article, we learn the basic knowledge of web forms and some naive form widgets, including:

• single line input: text, tel, email, search ...
• checkable input: checkbox and radio
• actual button: submit, reset, and button
• Image button
• File picker

With those elements, we can start building our own web forms.

Thanks for reading!

4. Reference

• Web forms