Yaaaaaay, you are getting married!!! Woooohooooo!!! You have Decent HTML and CSS skills, so Kudos on that. Tip, if there is an ability to format your code for easier readability to avoid hunting (
) for the closing tag that would speed things up. I will put text in bold and attach a link at the bottom to help you out, hope this helps. This helps you link stuff.
https://www.w3schools.com/html/html_form_input_types.asp
form action=""> <–!Notice the action keyword, here its blank yet you do need to put a filename.php there–>
User name:
input type=“text” name=“userid”>
User password:
input type=“password” name=“psw”>
/form>
<div id="rsvp" class="container"> <!-- RSVP form -->
<form class="form-horizontal" action="SomeFileNameYouChoose.php">
<fieldset>
<!-- Form Name -->
<legend>RSVP</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Your Name</label>
<div class="col-md-5">
<input id="textinput" name="textinput" type="text" placeholder="first and last name..." class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Number of guests of in your party:</label>
<div class="col-md-2">
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md" required="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Names of all guests in your party:</label>
<div class="col-md-4">
<textarea class="form-control" id="textarea" name="textarea">please separate names with a comma</textarea>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes">Which events will you attend?</label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input type="checkbox" name="checkboxes" id="checkboxes-0" value="1">
Event1
</label>
</div>
<div class="checkbox">
<label for="checkboxes-1">
<input type="checkbox" name="checkboxes" id="checkboxes-1" value="2">
Wedding Ceremony
</label>
</div>
<div class="checkbox">
<label for="checkboxes-2">
<input type="checkbox" name="checkboxes" id="checkboxes-2" value="3">
Wedding Reception
</label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
You likely wonder why I had action=“SomeFileNameYouChoose.php”.
Here is the last part:
Here is the link to original:
https://www.w3schools.com/tags/att_form_method.asp
I am aware in the example below I replaced get with post, because you do want to use post (more secure).
WHY?
Here:
GET requests can be cached
GET requests remain in the browser history
GET requests can be bookmarked
GET requests should never be used when dealing with sensitive data
GET requests have length restrictions
GET requests should be used only to retrieve data
POST requests are never cached
POST requests do not remain in the browser history
POST requests cannot be bookmarked
POST requests have no restrictions on data length
Here is link:
https://www.w3schools.com/tags/ref_httpmethods.asp
form action="./action_page.php" method=“post”>
First name: input type=“text” name=“fname”>
Last name: input type=“text” name=“lname”>
input type=“submit” value=“Submit”>
/form>
More to the point,
add a php file in your project (choose good name so you know it handles the form data).
You will likely wonder how to handle the data once you are on the php side, here:
First example with post:
!DOCTYPE HTML>
html>
body>
form action=“welcome.php” method=“post”>
Name:
E-mail:
input type=“submit”>
/form>
/body>
/html>
here is link:
https://www.w3schools.com/php/php_forms.asp
To display the submitted data you could simply echo all the variables. The “welcome.php” looks like this:
html>
body>
Welcome ?php echo $_POST[“name”]; ?>
Your email address is: ?php echo $_POST[“email”]; ?>
/body>
/html>
https://www.w3schools.com/php/php_forms.asp
notice, the “name” and “email” are
Name: <input type=“text” name=“name”>
E-mail: <input type=“text” name=“email”>
notice the name = (VERY IMPORTANT, whatever name you choose, XYZ, you have to write in $_POST(“XYZ”).
example (I AM BUTCHERING EXAMPLE ABOVE):
form action=“welcome.php” method="post"
Name: input type=“text” name="My_name"
E-mail: input type=“text” name="My_email"
input type=“submit”
/form>
here is the corresponding edit for the php part:
html>
body>
Welcome ?php echo $_POST[“My_name”]; ?>
Your email address is: ?php echo $_POST[“My_email”]; ?> with _ between My and email, do not know where _ went in this silly editor.
/body>
/html>
Plus, learn PHP, cause its the glue between the Client and Server:
Here is the code a snippet you can run by going to link below:
https://www.w3schools.com/php/php_form_validation.asp
<?php
// define variables and set to empty values
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
Hope this helps!!!
I had to put flawed code examples where I purposely omit the < because otherwise you will see only form fields… instead of the code itself.