Use a table to adjust the format of the form controls to make them look better

Because I want to write a web page myself, I am also learning some things about HTML language. This reminds me of my interest in web design in college. Unfortunately, I didn’t have my own computer at that time. I often went to Internet cafes to buy floppy disks to download some pictures, and then used fontpage to make some web pages. Later, I bought a computer and was fascinated by "Legend", and I also forgot about web design....

Since I was working on Ubuntu, and there were very few WYSIWYG web design tools under Linux, I finally chose Bluefish.

I want to make a form to add devices, but it looks ugly because the prefixes are different. As shown in the figure:

Copy code

The code is as follows:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
Username:<input type="text" name="username"><br/>
Password:<input type="password" name="password">
</body>
</html>

This input box is not aligned, I feel so sad, then my colleague said that I can use a table to format it, after asking for advice, the code is as follows:

Copy code

The code is as follows:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username"><br/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
</table>
</body>
</html>

Ahaha, I got a new skill. Thanks to Tong Jun for his strong support~~

It also taught me how to use CSS to control the format of the table.

Copy code

The code is as follows:

<<: How to deploy kafka in docker

>>: Docker starts MySQL configuration implementation process

Use a table to adjust the format of the form controls to make them look better

Method of dynamically loading geojson based on Vue+Openlayer

CSS pseudo-class: empty makes me shine (example code)

Tutorial on installing Odoo14 from source code on Ubuntu 18.04

Front-end advanced teaching you to use javascript storage function

CentOS6.8 Chinese/English environment switching tutorial diagram

Mysql 8.0.18 hash join test (recommended)

A brief discussion on Vue3 father-son value transfer

The difference between VOLUME and docker -v in Dockerfile

Detailed explanation of whereis example to find a specific program in Linux

Detailed tutorial on using the Prettier Code plugin in vscode

Recommend

WeChat applet selects the image control

Detailed explanation of writing multiple conditions of CSS: not

JavaScript implements mouse drag to adjust div size

How to implement the observer pattern in JavaScript

Detailed example of installing FastDfs file server using docker compose

Creative About Us Web Page Design

Solve the problem that PhpStorm fails to connect to VirtualBox

Detailed explanation of HTML basics (Part 2)

MySQL 5.7 zip version (zip version) installation and configuration steps detailed

How to make spaces have the same width in IE and FF?

Self-study of MySql built-in functions knowledge points summary

MySQL 8.0.12 winx64 decompression version installation graphic tutorial

Summary of various methods for JavaScript to determine whether it is an array

MYSQL implements ranking and querying specified user ranking function (parallel ranking function) example code

A detailed introduction to Linux memory management and addressing