You Are Using The Number Input Incorrectly

adhham — Sun, 16 Feb 2025 13:23:18 +0000

TIL I have been using the number inputs incorrectly and I've seen many others do the same.

HTML number input should not be used on just any type of number; It is designed to be used only for numbers that are incremental and is not appropriate for non-incremental values even if they are made up of numbers.

So this means it can be used to capture an amount of something such as the number of products to purchase.

<!-- ✅ Correct --->
<label for="products">Number of products to buy: </label>
<input id="products" type="number" name="products" value="0" />

But it cannot be used for phone numbers, postal codes and credit card numbers, because these are not incremental numbers.

<!-- ❌ Wrong --->
<label for="phone_no">Phone number:</label>
<input id="phone_no" type="number" name="phone_no" value="0" />

This also explains why it has a stepper button (in most browsers), which doesn't make much sense for phone numbers or credit card numbers.

According to the MDN Web Docs:

The number input type should only be used for incremental numbers, especially when spinbutton incrementing and decrementing are helpful to user experience. The number input type is not appropriate for values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many countries or credit card numbers.

To capture postal codes (and other non-incremental values) use <input> with inputmode attribute.

<!-- ✅ Correct --->
<label for="postal_code">Postal Code:</label>
<input id="postal_code" type="text" inputmode="numeric" pattern="\d*" />

For phone numbers <input type="tel"> can also be used.

<!-- ✅ Correct --->
<label for="phone_no">Phone number:</label>
<input type="tel" id="phone_no" name="phone_no" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />

How to Fix No Internet Connection in Digital Ocean's Droplet

adhham — Thu, 26 Dec 2024 16:10:48 +0000

Digital Ocean stores its network configuration in two interfaces: eth0 and eth1.

eth0 is used for public network (aka. The Internet)
eth1 is used for internal private network (ie. digital ocean's internal network)

The correct naming of these interfaces is a must for it to work properly; it should have the exact same name.

In your droplet, run ip -br a command to see if these two interfaces are correctly configured. If you see an output like this, it means the interfaces are not up.

$ ip -br a
eth0 DOWN
eth1 DOWN

To follow this tutorial you will need the public IP address and router gateway IP of your droplet. The public IP can be found in your droplet's dashboard page. If you don't know your gateway IP address, I recommend lodging a support ticket.

To configure eth0 or public network interface, run the following commands:

$ ip addr add 123.456.78.9/20 dev eth0
$ ip link set eth0 up
$ ip route add default via 123.456.0.1

Replace 123.456.78.9/20 with your droplet's public IP address and 123.456.0.1 with the gateway IP address.

Now, configure the nameservers. Edit /etc/resolv.conf file and add the following nameservers:

nameserver 8.8.8.8
nameserver 8.8.4.4

Apply the netplan configurations to make these changes persistent:

$ sudo netplan --debug generate
$ sudo netplan --debug apply

Run the ip -br a command again. If it gives a similar output to the one shown below, it means the interface has been configured.

$ ip -br a
eth0 UP 123.456.78.9/20

You can test this by pinging to a website. Try ping google.com and see if it is working correctly.

DEV Community: adhham

You Are Using The Number Input Incorrectly

How to Fix No Internet Connection in Digital Ocean's Droplet