Introduction to the web form
2023/03/12The fundamental knowledge of web form
Front-end
HTML
Cover image thanks toSincerely Media


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

html
<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
✨Live demoYou could have some intuitive image of these elements:live demo

2.2 Checkboxes and radio buttons

💡Buy something...

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

💡Three kinds of button input

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

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

💡Please upload your avatar

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

Designed & Coded by Tianyu @2022~2023