How to Create an HTML Form
For now, though, I'll let you see what's inside that form.html file:
<!DOCTYPE html>
<html>
<head>
<title>Example Form</title>
</head>
<body>
<h1>Example Form</h1>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
We start with the standard tags and then some <h1> text for a title. But then we open a <form> tag where the action points to a file called submit.php and the method specifies post. "Post" means that any text that's been entered into the form will be posted – or sent – to the submit.php file once the form is submitted.
The <input> tag down at the bottom of the code right before we close out the <form> uses the submit type to send our data.
<input type="submit" value="Submit">
The Submit value attribute is there to print the word "Submit" on the button we'll see on the form. That'll make figuring out how to use the form easier for users.
Now the code used by the form itself is broken down into three pairs of lines:
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
The first line here is a <label> tag that prints the word "Name:" on the first entry field. The accompanying <input> tag has a type attribute of "text", an id attribute of "name" and is a required field. That means the form submission won't be successful unless this field has a value.
The next pair does the same thing for an email address. But as we see from the type attribute, this field expects the input to conform to the properties of a valid email address. This field is also required.
The final pair – "Message" – takes a <textarea> tag and has a maximum number of rows and columns specified. This field, as you might expect, allows free-form text, but only up to a maximum number of characters.
That's our code. Let's see what it looks like in a browser. First, though, you'll need to get the container's public IP address.
There are a few ways to do that, but the one that involves the fewest keystrokes is to run ip a inside the container.
$ ip a
[...]
12: eth0@if13: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc noqueue state UP group default qlen 1000
link/ether 00:16:3e:81:57:1b brd ff:ff:ff:ff:ff:ff link-netnsid 0
inet 10.0.3.216/24 metric 100 brd 10.0.3.255 scope global dynamic eth0
valid_lft 3154sec preferred_lft 3154sec
inet6 fd42:e265:3791:64f9:216:3eff:fe81:571b/64 scope global mngtmpaddr noprefixroute
[...]
123