I'm currently making a website using PHP, HTML and a classless CSS (Water.css) Right now, I have a problem aligning my search bars and buttons into a row
<!-- Search Bar Name-->
<form action="search.php" method="GET">
<input type="text" name="query" placeholder="Search Equipment">
<input type="submit" value="Go">
</form>
<!-- Search Bar Price-->
<form action="searchprice.php" method="post">
<label for="min_price">Minimum price:</label>
<input type="text" name="min_price" id="min_price">
<label for="max_price">Maximum price:</label>
<input type="text" name="max_price" id="max_price">
<input type="submit" name="submit" value="Search">
</form>
<button onclick="window.location='add_equipment.php'">Add Equipment</a></button>
The search bars and the button work perfectly fine, however I have no clue why it stacks up like a column instead of being in a row.
It would be nice if someone could help me with this, I am a newbie to HTML
Not sure if this is what you are looking for:
Like Amir said lots of information on using divs,flex,grid in css. I feel like the classless link is making your inputs do that everytime I link to it, it puts everything in columns.
<!DOCTYPE html>
<html>
<head>
<title>Equipments</title>
<meta charset="utf-8">
<link rel="stylesheet" a href="./css/main.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css#2/out/water.min.css"> -->
</head>
<body>
<div class="nav">
<h2>List Of Equipments</h2>
<div class="navs">
<!-- Search Bar Name-->
<form action="search.php" method="GET">
<label for="Search">Search Equipment</label>
<input type="text" name="query" placeholder="Search Equipment"><br>
<input id="Sbutton" type="submit" value="Go">
</form>
</div>
<!-- Search Bar Price-->
<div class="navs">
<form action="searchprice.php" method="post">
<label for="min_price">Minimum price:</label>
<input type="text" name="min_price" id="min_price"><br>
<label for="max_price">Maximum price:</label>
<input type="text" name="max_price" id="max_price"><br>
<input id="Sbutton2" type="submit" name="submit" value="Search">
<button id="Sbutton3" onclick="window.location='add_equipment.php'">Add Equipment</button>
</form>
</div>
</div>
</body>
</html>
Here is the CSS when I am styling I like to change background of each div class so I can get a visual of what is happening as I change code.
.nav{
display: flex;
flex-direction: column;
margin: 10px;
margin-left: 15%;
margin-right: 15%;
padding-bottom: 20px;
background-color: rgb(77, 76, 76);
}
h2{
text-align: center;
font-size: 24px;
font-weight:bolder;
}
.navs {
width: 50%;
background-color: rgb(108, 109, 109);
height: 150px;
text-align: center;
margin-left: 25%;
margin-top: 20px;
padding-top: 10px;
}
#Sbutton{
font-size: 16px;
height: 150%;
width: 15%;
margin-left: 15%;
margin-top: 10px;
}
#Sbutton2{
font-size: 16px;
height: 150%;
width: 15%;
margin-left: 15%;
margin-top: 10px;
}
#Sbutton3{
font-size: 16px;
height: 150%;
width: 25%;
margin-top: 10px;
}
table{
border:3px solid gray;
border-collapse: collapse;
}
th{
border: 2px solid gray;
padding: 6px;
}
td{
border: 2px solid gray;
text-align: center;
}
Hope this helps.
I am trying to edit a form I have used many times but now I need to add checkboxes for options and I cannot for the life of me get them to align correctly or figure out where the formatting needs to be changed. I am not an expert at PHP, HTML, or CSS I was just tasked with this being in IT so I am learning as I am going. You guys have always came to my rescue on previous projects too and I am about a days worth deep into it with no changes. Made the checkboxes red in the CSS just so I could make sure a change I made to them went.
Basically want the checkboxes to look like this:
Project needs: [] Photography [] Videography [] Resize
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Marketing and Communications Request</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="marketing_style.css" />
</head>
<body>
<center>
<br /><br /><img src="logo.jpg" width="350px" height"100px"><br /><br />
<H1>Marketing and Communications Request</H1>
</center>
<div id="page-wrap">
<div id="contact-area">
<br />
<br />
<form method="post" action="marketing_contactengine.php">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" />
<label for="Phone">Phone:</label>
<input type="text" name="Phone" id="Phone" />
<label for="Dept">Department:</label>
<input type="text" name="Dept" id="Dept" />
<label for="Dir">Department Director:</label>
<input type="text" name="Dir" id="Dir" />
<label for="COID">COID/Account Code (GL Code):</label>
<input type="text" name="COID" id="COID" />
<br><br>
<br><br>
<h2><u>EVENT INFORMATION</u></h2>
<label for="EventName">Event Name:</label>
<input type="text" name="EventName" id="EventName" />
<label for="EventDateTime">Event Date & Time:</label>
<input type="text" name="EventDateTime" id="EventDateTime" placeholder="01/01/2021 08:00:00" />
<label for="EventLocation">Event Location:</label>
<input type="text" name="EventLocation" id="EventLocation" />
<label for="Desc">Brief description of the event:</label><br />
<textarea name="Desc" rows="2" cols="10" id="Desc"></textarea>
<br><br>
<br><br>
<h2><u>PROJECT INFORMATION</u></h2>
<label for="ProjectName">Project Name:</label>
<input type="text" name="ProjectName" id="ProjectName" />
<label for="Materials">Materials due date:</label>
<input type="text" name="Materials" id="Materials" />
<br />
</div>
<div id="checkboxes" class="checkboxes">
<label id="ProjectNeeds" for="ProjectNeeds" class="checkboxes">Project needs (check all that apply):</label>
<label class="checkboxes" for="Photography"><input type="checkbox" id="Photography" /> <span>Photography</span></label>
<label class="checkboxes" for="Videography"><input type="checkbox" id="Videography" /> <span>Videography</span></label>
<label class="checkboxes" for="Resize"><input type="checkbox" id="Resize" /> <span>Resize</span></label>
</div>
</div>
</div>
<div id="bottom" style="position: relative;">
<div style="position: absolute;">
Submission of this form is required for all requests to the marketing and communications team.
</div>
</body>
</html>
CSS:
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
background: white;
padding: 20px 50px 20px 50px;
min-height: 500px;
height: auto !important;
height: 500px;
width: 700px;
}
#contact-area {
width: 660px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 10px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
/* border: 2px solid #ccc; */
}
/* #contact-area textarea { */
/* height: 90px; */
/* } */
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 10px;
font-size: 1.4em;
font-weight: bold;
}
#bottom {
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 0px 100px;
width: 900px;
padding-top: 75px;
padding-bottom: 75px;
text-align: left;
}
#checkboxes {
color: red;
}
In your CSS, you have a label {} declaration that is affecting all labels, including the ones next to your input radios. It is making them float and that's why they mess up.
To fix it you need to add another declaration that cancels the float for the labels inside #checkboxes, like so:
#checkboxes label {
float: none;
}
You have to set the label CSS properties like that:
label {
float: left;
text-align: right;
margin-right: 15px;
padding-top: 10px;
font-size: 1.4em;
font-weight: bold;
}
And add another CSS line:
.checkboxes input { float:left; vertical-align:middle; margin-right:10px; }
I'm creating an online form and having a bit of trouble aligning the input boxes in the form. I've tried <br>, but it's always slightly off. I'm assuming this is affecting the text below as well.
Also, is PHPMailer still the preferred(simplest) way to go to retrieve the data user's input and attach? Some files might be pretty large.
head,
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #0C2440;
color: white;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 5px;
}
.header img {
float: left;
padding-top: 10px;
padding-right: 10px;
}
.header h1 {
text-align: center;
margin-right: 110px;
}
h2 {
text-align: center;
}
input[type=text],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=date],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
.column {
width: 50%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Mileage Certification Change Request Form</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800" media="all" onload="if(media!='all')media='all'">
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
document.getElementById('date').value = Date();
// document.getElementById('submit').onclick = function () {
// location.href = "confirmation.html";
// return false;
// };
// document.querySelectorAll('a[href^="#"]').forEach(anchor => {
// anchor.addEventListener('click', function (e) {
// e.preventDefault();
// document.querySelector(this.getAttribute('href')).scrollIntoView({
// behavior: 'smooth'
// });
// });
// });
</script>
</head>
<body>
<div class="header">
<img src="logo.png" alt="Logo">
<h1>Planning Department</h1>
</div>
<br>
<h2>Mileage Change Request Form</h2>
<br>
<div class="form">
<form>
<fieldset>
<br>
<div class="column">
Date of Submittal:<br>
<input type="date" id="date" name="date"><br> County Name:<br>
<input type="text" id="county" name="county"><br> City/Town Name:<br>
<input type="text" id="cityname" name="cityname"><br> Name of Office and Title:<br>
<input type="text" id="officename" name="officename"><br> Address:
<br>
<input type="text" id="address" name="address"><br> City:
<br>
<input type="text" id="city" name="city"><br>
</div>
<div class="column">
State:<br>
<input type="text" id="state" name="address"><br> ZIP Code:<br>
<input type="text" id="zip" name="zip"><br> Telephone:
<br>
<input type="text" id="phone" name="phone"><br> Fax:
<br>
<input type="text" id="fax" name="fax"><br> Email:
<br>
<input type="text" id="email" name="email"><br> Comments:
<br>
<input type="text" id="comments" name="comments"><br>
</div>
<div class="reqs">
<br>
<p><b>Before we can make any changes, you MUST include items 1-3 for each submission. For annexations with mileage changes, you MUST include items 1-4. If you only have an annexation with no changes to mileage, item 4 is all you need to submit.</b></p>
<ol>
<li>Copy of a current (scaled) map(s) depicting the roads that need added and/or removed OR a shapefile or file geodatabase. If none of these are available, provide a copy of measurable (Scaled) plats depicting the roads that need added/removed.</li>
<input type="file" id="uploaded_file" name="pic" accept="image/*" required>
<li>Copy of meeting minutes at which a governing body accepted the roads into your system. If unavailable, please provide a letter stating the acceptance of the roads signed by an elected official. An example acceptance letter is available if
needed.</li> <input type="file" name="pic" accept="image/*" required>
<li>A list of each road and its requested mileage.</li> <input id="fileSelect" name="spreadsheet" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
<li>Copy of annexation ordinance(s) establishing the new corporate limits along with a shapefile and/or file geodatabase of the correct corporate limits. If a shapefile is not available provide a drawing of the correct corporate limits on a scaled
map.</li> <input type="file" name="pic" accept="image/*" required>
</ol>
</div>
</fieldset>
</form>
</div>
<input id="submit" type="button" value="Submit"></input>
<!-- <?php
if(isset($_POST['submit'])) {
$emailAddress = '';
require "class.phpmailer.php";
$msg = 'Date:'.$_POST['date'].'<br /> County:'.$_POST['county'].'<br /> City/Town Name:'.$_POST['cityname'].'<br /> Name of Office and Title: '.$_POST['officename']. '<br /> Address: '.$_POST['address']. '<br /> City: '.POST['city'], '<br /> State: $_POST['state']. '<br /> ZIP Code: '.POST['zip']. '<br /> Telephone: '.$_POST['phone']. '<br /> Fax: '.$_POST['fax']. '<br /> Email: '.$_POST['email']. '<br /> Comments: '$_POST['comments']. '<br />';
move_uploaded_file($_FILES["uploaded_file"]["tmp_name"], $_FILES["uploaded_file"]["name"]);
$mail = new PHPMailer();
$mail->IsMail();
$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->AddAddress($emailAddress);
$mail->SetFrom($_POST['email'], $_POST['name']);
$mail->Subject = "Subject";
$mail->MsgHTML($msg);
$mail->AddAttachment( $_FILES["uploaded_file"]["name"]);
$mail->Send();
echo'<script> window.location="../MCCR.html"; </script> ';
}
?> -->
</body>
</html>
Remove <br> and use CSS style. Added some style in your existing code as
// newly added style begin
h2 {
text-align: center;
margin:30px 0;
}
fieldset {
padding-top:20px;
}
.form-fields {
display: flex;
flex-direction:row;
width: 80%;
margin: 0 auto;
}
.column {
width:50%;
display:flex;
flex-direction:column;
}
input {
width:100%;
}
//end
head,
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #0C2440;
color: white;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 5px;
}
.header img {
float: left;
padding-top: 10px;
padding-right: 10px;
}
.header h1 {
text-align: center;
margin-right: 110px;
}
input[type=text],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=date],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
// newly added style begin
h2 {
text-align: center;
margin:30px 0;
}
fieldset {
padding-top:20px;
}
.form-fields {
display: flex;
flex-direction:row;
width: 80%;
margin: 0 auto;
}
.column {
width:50%;
display:flex;
flex-direction:column;
}
input {
width:100%;
}
//end
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Mileage Certification Change Request Form</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800" media="all" onload="if(media!='all')media='all'">
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//document.getElementById('date').value = Date();
// document.getElementById('submit').onclick = function () {
// location.href = "confirmation.html";
// return false;
// };
// document.querySelectorAll('a[href^="#"]').forEach(anchor => {
// anchor.addEventListener('click', function (e) {
// e.preventDefault();
// document.querySelector(this.getAttribute('href')).scrollIntoView({
// behavior: 'smooth'
// });
// });
// });
</script>
</head>
<body>
<div class="header">
<img src="logo.png" alt="Logo">
<h1>Planning Department</h1>
</div>
<h2>Mileage Change Request Form</h2>
<div class="form">
<form>
<fieldset>
<div class="form-fields">
<div class="column">
Date of Submittal:
<input type="date" id="date" name="date"> County Name:
<input type="text" id="county" name="county"> City/Town Name:
<input type="text" id="cityname" name="cityname"> Name of Office and Title:
<input type="text" id="officename" name="officename"> Address:
<input type="text" id="address" name="address"> City:
<input type="text" id="city" name="city">
</div>
<div class="column">
State:
<input type="text" id="state" name="address"> ZIP Code:
<input type="text" id="zip" name="zip"> Telephone:
<input type="text" id="phone" name="phone"> Fax:
<input type="text" id="fax" name="fax"> Email:
<input type="text" id="email" name="email"> Comments:
<input type="text" id="comments" name="comments">
</div>
</div>
<div class="reqs">
<p><b>Before we can make any changes, you MUST include items 1-3 for each submission. For annexations with mileage changes, you MUST include items 1-4. If you only have an annexation with no changes to mileage, item 4 is all you need to submit.</b></p>
<ol>
<li>Copy of a current (scaled) map(s) depicting the roads that need added and/or removed OR a shapefile or file geodatabase. If none of these are available, provide a copy of measurable (Scaled) plats depicting the roads that need added/removed.</li>
<input type="file" id="uploaded_file" name="pic" accept="image/*" required>
<li>Copy of meeting minutes at which a governing body accepted the roads into your system. If unavailable, please provide a letter stating the acceptance of the roads signed by an elected official. An example acceptance letter is available if
needed.</li> <input type="file" name="pic" accept="image/*" required>
<li>A list of each road and its requested mileage.</li> <input id="fileSelect" name="spreadsheet" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
<li>Copy of annexation ordinance(s) establishing the new corporate limits along with a shapefile and/or file geodatabase of the correct corporate limits. If a shapefile is not available provide a drawing of the correct corporate limits on a scaled
map.</li> <input type="file" name="pic" accept="image/*" required>
</ol>
</div>
</fieldset>
</form>
</div>
<input id="submit" type="button" value="Submit"></input>
<!-- <?php
if(isset($_POST['submit'])) {
$emailAddress = '';
require "class.phpmailer.php";
$msg = 'Date:'.$_POST['date'].'<br /> County:'.$_POST['county'].'<br /> City/Town Name:'.$_POST['cityname'].'<br /> Name of Office and Title: '.$_POST['officename']. '<br /> Address: '.$_POST['address']. '<br /> City: '.POST['city'], '<br /> State: $_POST['state']. '<br /> ZIP Code: '.POST['zip']. '<br /> Telephone: '.$_POST['phone']. '<br /> Fax: '.$_POST['fax']. '<br /> Email: '.$_POST['email']. '<br /> Comments: '$_POST['comments']. '<br />';
move_uploaded_file($_FILES["uploaded_file"]["tmp_name"], $_FILES["uploaded_file"]["name"]);
$mail = new PHPMailer();
$mail->IsMail();
$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->AddAddress($emailAddress);
$mail->SetFrom($_POST['email'], $_POST['name']);
$mail->Subject = "Subject";
$mail->MsgHTML($msg);
$mail->AddAttachment( $_FILES["uploaded_file"]["name"]);
$mail->Send();
echo'<script> window.location="../MCCR.html"; </script> ';
}
?> -->
</body>
</html>
<!DOCTYPE html>
<?php
session_start();
error_reporting(0);
$submit=$_POST['submit'];
$firstName=strip_tags($_POST['firstName']);
$lastName=strip_tags($_POST['lastName']);
$email=strip_tags($_POST['email']);
$username=strip_tags($_POST['username']);
$password=strip_tags($_POST['password']);
$DateTime=strip_tags($_POST['DateTime']);
if ($submit)
{
//open Database
$connect = mysql_connect("localhost", "root", "");
mysql_select_db("mitch");
//select database
$namecheck = mysql_query ("SELECT username FROM tbmitch WHERE username='$username'");
$count = mysql_num_rows($namecheck);
if ($count!=0)
{
echo "<script type='text/javascript'>alert('Control number already exists')</script>";
}
//check for existence
else
if($username)
{
$queryreg = mysql_query("INSERT INTO tbmitch VALUES ('$username','$lastName','$firstName','$email','$password',now())");
$_SESSION['username']=$username;
header('location:home.php');
echo '
<script type="text/javascript">alert("Record/s saved.");
window.location.href = "home.php";
</script>';
}
else
echo "<script type='text/javascript'>alert('Please fill in all fields')</script>";
}
?>
<html>
<head>
<title>MobileApp-SignUp</title>
<body>
<link rel="stylesheet" type="text/css" href="css/960_12_col.css" />
<style>
* {
font-family: Georgia;
color: black;
text-align: top;
font-size: 16px;}
li {
display: inline;
padding: 5px;}
ul {
position: fixed;
top: 0px;
left: 0px;
padding: 15px;
margin: 0px;
width: 100%;
color: #b5c1ad;
text-align: left;
text-decoration: none;
background: #4EE2EC;}
a {
color: black;
text-decoration: none;}
a:hover {
color: #ffffff;}
header {
text-align: right;}
</style>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/form.css" />
<script type="text/javascript">
function formatTextArea(textArea) {
textArea.value = textArea.value.replace(/(^|\r\n|\n)([^*]|$)/g, "$1*$2");
}
window.onload = function() {
var textArea = document.getElementByusername("t");
textArea.onkeyup = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 13) {
formatTextArea(this);
}
};
};
</script>
</head>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container_12 clearfix">
<div username="header" class="grusername_12">
<img src = "images/img.gif" height="200" width="200" border="3" align="center"></p>
<div username="nav" style="width:450">
<ul>
<li>Back to Home|</li>
<br>
<br>
<img src="images/header.gif" width="95" class="logo" /><br>
<img src="images/underheader.gif" width="75" class="logo" />
</ul>
</div>
</div>
<span class="right">
<?php echo " Welcome ".$_SESSION['UserID']." |"; ?>
</span>
</head>
</body>
<br>
<style type="text/css">
body {
background-image: url("bg/bgcloud.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
color: black;
padding: 20px;
font-family: Georgia;}
p {
padding: 5px;
margin: 0px;
color: red;}
p.ab {
color: black;}
.button {
padding: 7px 20px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #7FE817;
border: none;
border-radius: 8px;
box-shadow: 0 5px #999;}
.button:hover {
background-color: #ffffff;}
</style>
<body>
<p class = "ab">[Signup to check your Cacao plant]</p>
<p class = "ab">Signup here <p>↓ ↓ ↓ ↓ ↓ ↓</p>
<br>
<br>
<form action="done.php" method="post">
<div>
<label for="name" class="title">First Name:</label>
<input type="text" username="firstName" name="firstNamename" size="30" name='firstName' maxlength="100" required="required"/>
</div>
<br>
<div>
<label for="name" class="title">Last Name:</label>
<input type="text" username="lastName" name="lastName" size="30" name='lastName' maxlength="100" required="required"/>
</div>
<br>
<div>
<label for="email" class="title">E-mail add:</label>
<input type="email" username="email" name="email" size="30" name='email' maxlength="100" required="required"/>
</div>
<br>
<div class="radio-buttons">
<span class="title" required="required">Gender:</span>
<input type="radio" name="gender" username="male" value="M" />
<label for="male">M</label>
<input type="radio" name="gender" username="female" value="F" />
<label for="female">F</label><br />
</div>
<br>
<br>
<div>
<p>*the next entry must be remembered for logging in*</p>
<label for="username">Username:</label>
<input type="text" name="username" required="required" size="20" name='username' maxlength="100"/></title><br />
<br>
<label for="password">Password :</label>
<input type="password" name="password" required="required" size="20" name='password' maxlength="100" />
<br>
<br>
<button class="button"><span>Submit</span></button>
</div>
</form>
</body>
<br>
<br>
<br>
<br>
<br>
<p class = "ab" align="right">
© 2017 BSCT-2B MobileApp
</p>
</form>
</center>
</body>
</html>
I'm into PHP and I find it difficult to pass my files to mysql database (I'm using the xampp here, if that helps), I want to do signups on my site and later log in to the registered data, if I;m referring to other users I want to block users who haven't register themselves on the database first, so how do I do it? What to change?
In PHP + mySql based application we can have web pages for authenticated users only, and to achieve that we need to do following steps:
Create Login Form.
On submit validate the data submitted through form and if it return true (Valid login credential). Create a $_SESSION variable to identify logged in user.
While rendering any webpage which requires authenticated user only, check for that particular $_SESSION variable.
It valid $_SESSION exists, show the page, else redirect it to the login page.
Hope this helps.
I created the contact form in html and css now comes the hard part.
Since it is my first experience with the php code sapede tell me how to create the code so that you can send the mail with all the information on the form?
Sorry for my bad English, Let me know if you didn't understand my Question
The HTML code
<form id="contactform">
<div class="formcolumn">
<label for="name">Nome e Cognome</label>
<input type="text" id="name" />
<label for="indirizzo">Indirizzo</label>
<input type="text" id="indirizzo" />
<ul>
<li>Consegna a Domicilio<input type="checkbox" id="domicilio" /></li>
</ul>
</div>
<div class="formcolumn">
<label for="telefono">Telefono</label>
<input type="text" id="telefono" />
<label for="email">E-mail</label>
<input type="email" id="email" />
<ul>
<li>Ritiro presso la macelleria<input type="checkbox" id="macelleria" /></li>
</ul>
</div>
<div class="formcolumn_2">
<label for="consegna">Indirizzo di consegna</label>
<input type="text" id="consegna" />
<label for="note">Note</label>
<input type="text" id="note" />
<label for="feedback">Ordine</label>
<textarea id="feedback"></textarea>
</div>
<div class="buttons">
<input class="button" value="INVIA" type="INVIA">
</div>
</form>
The CSS code
#contactform{
font-family:"Eras Medium ITC";
width: 585px;
border: 1px solid blue;
}
.formcolumn input, #contactform textarea{
width:95%;
border: 2px solid orange;
padding: 4px;
}
.formcolumn_2 input, #contactform textarea{
width:571px;
border: 2px solid orange;
padding: 4px;
}
#contactform textarea{
resize:vertical;
height: 200px;
}
#contactform input[type="checkbox"]{
width: auto;
float:right;
height: auto;
margin-left: 15px;
margin-bottom: 25px;
}
#contactform .formcolumn{
width:280px;
float: left;
}
#contactform .formcolumn:first-of-type{
margin-right: 25px;
}
#contactform label {
padding-top:10px;
padding-bottom:5px;
display: block;
}
#contactform ul{
list-style:none;
list-type: none;
margin: 0;
padding: 0;
float: left;
}
#contactform ul li{
float: left;
width: auto;
margin-top:20px;
}
#contactform div.buttons{
clear: both;
text-align: center;
}
#contactform input.button{
margin-top: 1.5EM;
width: 50%;
box-shadow: 0 0 10px gray;
text-transform: uppercase;
cursor: pointer;
min-width: 100px;
max-width: 600px;color: white;
font-weight: bold;
letter-spacing: 7px;
text-shadow: 0 -2px 1px #8a8a8a;
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%,
rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)),
color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
#contactform input.button:active{
text-shadow: 0 0 1px #8a8a8a;
background: rgb(109,0,25);
background: -moz-linear-gradient(top, rgba(109,0,25,1) 0%,
rgba(143,2,34,1) 56%, rgba(169,3,41,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(109,0,25,1)), color-stop(56%,rgba(143,2,34,1)),
color-stop(100%,rgba(169,3,41,1)));
background: -webkit-linear-gradient(top, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -o-linear-gradient(top, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -ms-linear-gradient(top, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: linear-gradient(to bottom, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#6d0019', endColorstr='#a90329',GradientType=0 );
}
Also can you tell me because even though I gave text-align: center INVIO button on the message remains on the left?
you need something like this
<html><body>
<form action= "post.php" method= "POST">
<p>Имя: </p><p> <input type= "text" name= "name"> </p>
<p>E-mail: </p><p> <input type= "text" name= "email"></p>
<p>Сообщение: </p><p> <textarea rows= "10" cols= "45" name= "message"></textarea></p>
<input type= "submit" value= "Отправить">
</body></html>
where action= "post.php" php file is a connection, so you need to explicitly write this file to send letters and then connect it as in Example
just copy and paste..hope this will help you!
<?php
if(isset($_POST['subm']))
{
$name=$_POST['name'];
$Indirizzo=$_POST['Indirizzo'];
$telefono=$_POST['telefono'];
$email=$_POST['email'];
$consegna=$_POST['consegna'];
$note=$_POST['note'];
$feedback=$_POST['feedback'];
$to = "somebody#example.com";
$subject = "Details";
$message = "
<html>
<head>
<title>Contact details</title>
</head>
<body>
<p>Your Details</p>
<table>
<tr>
<th>Name</th>
<th>Indirizzo</th>
<th>telefono</th>
<th>email</th>
<th>consegna</th>
<th>note</th>
<th>feedback</th>
</tr>
<tr>
<td>$name</td>
<td>$Indirizzo</td>
<td>$telefono</td>
<td>$email</td>
<td>$consegna</td>
<td>$note</td>
<td>$feedback</td>
</tr>
</table>
</body>
</html>
";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From: somebody#example.com>' . "\r\n";
$headers .= 'Cc: somebody#example.com' . "\r\n";
mail($to,$subject,$message,$headers);
echo "Thank you for sending us feedback";
}
?>
<html>
<head>
</head>
<title>feedback form</title>
<style>
<---your css code -->
</style>
</head>
<body>
<form id="contactform" method="post">
<div class="formcolumn">
<label for="name">Nome e Cognome</label>
<input type="text" id="name" name="name" />
<label for="indirizzo">Indirizzo</label>
<input type="text" id="indirizzo" name="Indirizzo" />
<ul>
<li>Consegna a Domicilio<input type="checkbox" id="domicilio" /></li>
</ul>
</div>
<div class="formcolumn">
<label for="telefono">Telefono</label>
<input type="text" id="telefono" name="telefono" />
<label for="email">E-mail</label>
<input type="email" id="email" name="email" />
<ul>
<li>Ritiro presso la macelleria<input type="checkbox" id="macelleria" /></li>
</ul>
</div>
<div class="formcolumn_2">
<label for="consegna">Indirizzo di consegna</label>
<input type="text" id="consegna" name="consegna"/>
<label for="note">Note</label>
<input type="text" id="note" name="note"/>
<label for="feedback">Ordine</label>
<textarea id="feedback" name="feedback"></textarea>
</div>
<div class="buttons">
<input class="button" value="INVIA" name="subm" type="submit">
</div>
</form>
</body>
</html>