<p>Please enter your username <form><input /> and password <input /></form> to log in.</p>
looks like this:
The method can accept one of two possible values: post or get
The post method includes the form data in the body of the form and
sends it to the web server. The get method appends the data to the URL
specified in the action attribute and most often is used in searches.
Both form controls are created using the input element. Each control is also assigned a name that
distinguishes it and its data from the other form controls.
One can apply widths to block-level elements, so I set the display property on the labels to block.
I used float: left and a width of 150 pixels to get the form fields to move to the
right of the labels. Setting the text-align property to right for the labels moves
them to the right side of the 150-pixel box I put them in. Then I just added a
10-pixel margin to create some space between the labels and the form fields and
bolded the label text. To get the Submit button, which has no label, to line up
with the other form fields, I added a 160-pixel right margin. That's 150 pixels
for the label and 10 pixels for the margin I added to the labels.
To test your forms, I recommend using the get method and leaving out the
action attribute of the form tag. When you submit the form, the values you
entered will appear in the URL for the page so that you can inspect them and
make sure that the results are what you expected.
Here's what the data that's sent to the server looks like: username=someone&password=somepassword
The code
<p>Please enter your username <form><input /> and password
<input /></form> to log in.</p>
looks like this: