How do I create an HTML web form?

I've been making HTML sites for a while and I've always feared making forms so I've resorted to using form generators.

This time round I've decided I want to do it myself. I know the basics that a form looks something like this:

<form id="mail_form">
        <div>
开发者_如何学运维            <input type="text" name="subject" id="subject"/>
        </div>
        <div>
            <textarea name="message" id="message"></textarea>
        </div>
        <div>
            <input type="submit" name="submit" id="submit" value="Send"/>
        </div>
</form>

But to make the form actually work, what in your opinion is the best way of doing this which is simple and effective?

Thanks

You need to POST it to a script so that it can be processed.

In the tag, you need to include an action and method attribute. The action specifies a webpage on which the data will be sent to, and the method is how it will be sent. There are two ways to send the data, either using POST or GET, though in your case POST is probably the better option.

Your will look like this:

myform.php

<form id="mail_form" action="mypost.php" method="POST">
        <div>
            <input type="text" name="subject" id="subject"/>
        </div>
        <div>
            <textarea name="message" id="message"></textarea>
        </div>
        <div>
            <input type="submit" name="submit" id="submit" value="Send"/>
        </div>
</form>

You would have something like the following to access the data:

mypost.php

<?PHP
     echo $_POST['subject'];
     echo "\<br\>";
     echo $_POST['message'];
?>

This will simply print out the value that the user put in. You can choose to do whatever you want with it.

Of course, this way only works with PHP. You can set the action to any kind of document, but you need some server-side scripting language to retrieve and manipulate the data.

For further reading see http://www.w3schools.com/php/php_forms.asp.

First off, I'd suggest paring the form down to its essentials:

<form id="mail_form">
    <input type="text" name="subject" id="subject"/>
    <textarea name="message" id="message"></textarea>
    <input type="submit" name="submit" id="submit" value="Send"/>
</form>

Then add in some semantic information:

<form id="mail_form">
    <label for="subject">Subject:</label>
    <input type="text" name="subject" id="subject"/>

    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>

    <input type="submit" name="submit" id="submit" value="Send"/>
</form>

Then use fieldset elements to segment the form into related components:

<form id="mail_form">
    <fieldset class="message">
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject"/>

        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
    </fieldset>

    <fieldset class="submitReset">
        <input type="submit" name="submit" id="submit" value="Send"/>
    </fieldset>
</form>

At this point you need to add information to the form's opening tag to give instruction as to what you want to happen on submit, and how:

<form id="mail_form" action="http://path.to.server-side-script.com/script.php" method="post" <!-- or 'get' -->>

Once the submit button is clicked (or the form is submitted by whatever means), the information will be sent to the server-side/back-end script located at "http://path.to.server-side-script.com/script.php".

Unlike JS there's no same-domain policy to worry about, and you can (though probably shouldn't) submit information to any form accessible with your browser.

Edited in response to comment (to question) by OP:

...the form doesn't send. I'm looking for the best script to send web forms.

You don't need a script to send the form, all you need to do is add the action and method attributes to the form's opening tag. The browser will take care of submission all by itself. You do, however, need a script to process/handle the form on your server. But that's a whole other question, and is only answerable if you give details about your back-end/server-side resources.

You require a "backend" to make this work. This would usually be ASP or PHP.

When you click the "Submit" button your browser will send the data to the back end where code would do actions based on the data submitted. Usually it would store this data into a database.

You should probably look at PHP its probably easier to get into and the hosting costs are generally cheaper

You need to specify form's action and target properties and method (POST or GET).

As the other responses pointed out, you need a service back-end to handle the request in the server.

If you are looking to work with PHP, I would recommend you getting WAMP to run Apache/PHP in your computer, and here is a very simple tutorial: http://www.w3schools.com/php/php_forms.asp

If you are planning to use ASP .NET, you could get the software from http://www.asp.net, and they have very nice tutorials on their website also.

There are other server side programs you could use also, such as Python or Ruby. It is all a question of exploring and finding what you like.

Try this: Make a new file on your desktop called: Form.html. Then what you should do is copy and paste this code, if you would like a web forum. You can edit what the text says later.

form.html code:

<!DOCTYPE html>
<style>
h1 {
  background-color: red;
}
body { 
background-color: black;
}
</style>
<html>
<head>
<script>
function formSubmit() {
    document.forms["myForm"].submit();
}
</script>
</head>
<body>
<h1><sup>Emerson</sup>Wishlist</h1>

<form name="myForm"
action="actionpage.html" method="get">
  <label for="fname"><p style="color:red">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname"><p style="color:red">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="button" onclick="formSubmit()" value="Sign in">
</form>

<p style="color:red">Sign in to the Emerson Wishlist</p>

</body>
</html>

Alright, now that you are done with that, make a new .html file called actionpage.html.

Then copy and paste the code from here into that file:

<!DOCTYPE html>
<style>
h1 {
  background-color: red;
}
body { 
background-color: black;
}

@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
</style>
<header>
<h1><sup>Emerson</sup>Wishlist</h1>
</header>
<body>
<h2 style="color:red">Signed in</h2>
<p style="color:red">Ms. Example needs Wet Wipes. (the Purell kind)</p>
<p style="color:red">Click the button below to donate Wet Wipes to Ms. Example</p>
</body>
<button onclick="myFunction()">Donate</button>

<script>
function myFunction() {
  alert("Successfully donated to Ms. Example!");
}
</script>

Then, save and run form.html in a browser. You should get a working web form.

If you are wondering about the part: "Ms. Example needs Wet Wipes" this is for a school project, where I am going to build a wishlist for the teachers at my school.