I have an HTML form that submits to a Coldfusion action page. For some reason, the form struct does not come through? The 2 files index.cfm and add.cfm are both in the same directory. When I submit the form the test text in the processing page shows, but not the form. I also do not see the form variables in the CF debugger.
What am I missing?
index.cfm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Slideshow Admin</title>
<!--- <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> --->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
h1 {
font-size: 34px;
}
h2 {
font-size: 26px;
}
.yt-container {
padding: 2% 5%;
max-width: 1400px;
margin: 0 auto;
}
.input-short {
max-width: 200px;
}
.input-shorter {
max-width: 100px;
}
.input-med {
max-width: 500px;
}
.input-long {
max-width: 800px;
}
</style>
</head>
<body>
<div class="yt-container">
<h1>Video Slideshow Admin</h1>
<!-- form -->
<h2 class="form-title">Add Video</h2>
<p class="required">* Required</p>
<form name="vidform" action="add.cfm" method="post">
<div class="form-group">
<label for="heading">Heading</label>
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
</div>
<div class="form-group">
<label for="url">Embed URL*</label>
<input type="text" class="form-control input-long" id="url" placeholder="Embed URL" value="" required>
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control input-short" id="status">
<option ng-selected="formData.type == null">Select</option>
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</div>
<div class="form-group">
<label for="order_seq">Order Sequence</label>
<input type="text" class="form-control input-shorter" id="order_seq" placeholder="Order" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
add.cfm
We are here
<cfdump var="#form#">
<cfabort>
Every form input needs a name attribute as well.
This is what Coldfusion is looking for when you post the form.
So:
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
Becomes:
<input type="text" class="form-control input-med" id="heading" name="heading" placeholder="Heading" value="">
This goes the same for <select> and checkbox / radio
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 13 days ago.
Improve this question
[Edit] I'm building a basic survey form for a Freecodecamp exercise and would like the top div container to reach the edge of the viewport on both sides, but there is a gap on the left-hand side. I would like to eliminate this gap.
Here's my code:
html,
body {
overflow-x: hidden;
background-color: #ffffff;
background-image: url(https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
background-attachment: fixed;
background-repeat: no-repeat;
}
.heading {
text-align: center;
}
#title {
width: 500%;
margin-left: -200%;
background-color: rgba(255, 255, 255, 0.3);
font-family: Calibri, Tahoma, Arial;
font-size: 35px;
font-weight: 500;
color: #272a2b;
border-radius: 5px;
padding: 10px 0px 10px 0px;
}
<!DOCtype html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<head>
<metacharset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
</head>
<body>
<div class="heading">
<h1 id="title">Registration Form</h1>
<p id="description">Tell us about yourself</p>
</div>
<!-- FORM BODY -->
<form id="survey-form">
<div class="form-bg">
<div class="form-group">
<label for="name" id="name-label">Name</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name Here" required>
</div>
<div class="form-group">
<label for="email" id="email-label">Email</label>
<input type="email" id="email" name="email" placeholder="Enter Your Email Here" required>
</div>
<div class="form-group">
<label for="number" id="number-label">Age</label>
<input type="number" id="number" name="age" min="13" max="110" placeholder="Enter Your Age">
</div>
<div class="form-group">
<label for="dropdown" id="dropdown-label">
Which option is your ideal role?</label>
<select name="dropdown" id="dropdown">
<option value="" disabled selected hidden>Select your ideal role</option>
<option name="ideal-role" value="software-engineer">
Software Engineer
</option>
<option name="ideal-role" value="software-developer">
Software Developer
</option>
<option name="ideal-role" value="data-analyst">
Data Analyst
</option>
<option name="ideal-role" value="web-developer">
Web Developer
</option>
<option name="ideal-role" value="mobile-app-developer">
Mobile App Developer
</option>
</select>
</div>
<div class="form-group">
<label for="study-hours" id="hours-label">How many hours per day can you study?</label><br>
<input type="radio" name="study-hours" id="1-hour" value="1-hour">
<label for="1-hour">1 Hour</label><br>
<input type="radio" name="study-hours" id="2-hours" value="2-hours">
<label for="2-hours">2 Hours</label><br>
<input type="radio" name="study-hours" id="3-hours" value="3-hours">
<label for="3-hours">3 Hours</label><br>
<input type="radio" name="study-hours" id="4-hours" value="4-hours">
<label for="4-hours">4 Hours</label>
</div>
<div class="form-group">
<label for="checkbox" id="checkbox-label">Check which activities you enjoy:</label><br>
<input type="checkbox" name="checkbox" id="problem-solving" value="problem-solving">
<label for="problem-solving">Problem Solving</label><br>
<input type="checkbox" name="checkbox" id="mathematics" value="mathematics">
<label for="mathematics">Mathematics</label><br>
<input type="checkbox" name="checkbox" id="data-analysis" value="data-analysis">
<label for="data-analysis">Data Analysis</label><br>
<input type="checkbox" name="checkbox" id="graphic-design" value="graphic-design">
<label for="graphic-design">Graphic Design</label>
</div>
<div class="form-group">
<label for="comments">Add any other comments here:</label>
<textarea name="comments" id="comments" placeholder="Type your comments here..." rows="8"></textarea>
</div>
<div class="button-wrap">
<input type="submit" id="submit" value="Submit">
</div>
</div>
<!-- END OF FORM BODY -->
</form>
</body>
</html>
I have tried following this tip, but it only makes the right side stretch off the screen, not the left.
Inspecting the page, your problem is caused by the default margin present on the <body> tag, you can remove them by adding a margin: 0, see the corrected code :
html, body {
margin: 0; /* Removed body margin that created the gaps */
overflow-x: hidden;
background-color: #ffffff;
background-image: url(https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
background-attachment: fixed;
background-repeat: no-repeat;
}
.heading {
text-align: center;
}
#title {
/* Edited out, you don't actually need this to achieve what you want */
/* width: 500%;
margin-left: -200%; */
background-color: rgba(255,255,255,0.3);
font-family: Calibri, Tahoma, Arial;
font-size:35px;
font-weight: 500;
color: #272a2b;
border-radius: 5px;
padding: 10px 0px 10px 0px;
}
<!DOCtype html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<head>
<metacharset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
</head>
<body>
<div class="heading">
<h1 id="title">Registration Form</h1>
<p id="description">Tell us about yourself</p>
</div>
<!-- FORM BODY -->
<form id="survey-form">
<div class="form-bg">
<div class="form-group">
<label for="name" id="name-label">Name</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name Here" required>
</div>
<div class="form-group">
<label for="email" id="email-label">Email</label>
<input type="email" id="email" name="email" placeholder="Enter Your Email Here" required>
</div>
<div class="form-group">
<label for="number" id="number-label">Age</label>
<input type="number" id="number" name="age" min="13" max="110" placeholder="Enter Your Age">
</div>
<div class="form-group">
<label for="dropdown" id="dropdown-label">
Which option is your ideal role?</label>
<select name="dropdown" id="dropdown">
<option value="" disabled selected hidden>Select your ideal role</option>
<option name="ideal-role" value="software-engineer">
Software Engineer
</option>
<option name="ideal-role" value="software-developer">
Software Developer
</option>
<option name="ideal-role" value="data-analyst">
Data Analyst
</option>
<option name="ideal-role" value="web-developer">
Web Developer
</option>
<option name="ideal-role" value="mobile-app-developer">
Mobile App Developer
</option>
</select>
</div>
<div class="form-group">
<label for="study-hours" id="hours-label">How many hours per day can you study?</label><br>
<input type="radio" name="study-hours" id="1-hour" value="1-hour">
<label for="1-hour">1 Hour</label><br>
<input type="radio" name="study-hours" id="2-hours" value="2-hours">
<label for="2-hours">2 Hours</label><br>
<input type="radio" name="study-hours" id="3-hours" value="3-hours">
<label for="3-hours">3 Hours</label><br>
<input type="radio" name="study-hours" id="4-hours" value="4-hours">
<label for="4-hours">4 Hours</label>
</div>
<div class="form-group">
<label for="checkbox" id="checkbox-label">Check which activities you enjoy:</label><br>
<input type="checkbox" name="checkbox" id="problem-solving" value="problem-solving">
<label for="problem-solving">Problem Solving</label><br>
<input type="checkbox" name="checkbox" id="mathematics" value="mathematics">
<label for="mathematics">Mathematics</label><br>
<input type="checkbox" name="checkbox" id="data-analysis" value="data-analysis">
<label for="data-analysis">Data Analysis</label><br>
<input type="checkbox" name="checkbox" id="graphic-design" value="graphic-design">
<label for="graphic-design">Graphic Design</label>
</div>
<div class="form-group">
<label for="comments">Add any other comments here:</label>
<textarea name="comments" id="comments" placeholder="Type your comments here..." rows="8"></textarea>
</div>
<div class="button-wrap">
<input type="submit" id="submit" value="Submit">
</div>
</div>
<!-- END OF FORM BODY -->
</form>
</body>
</html>
What you are after is called "full bleed". There are various approaches to this.
I'm trying to make a form but when I try to centralise it, it just stay tight to the left side of #wrapper. It reacts to margin-top but not anything to do with going across. I've tried putting a value on margin, using margin-left and still nothing. I'm pretty sure I've followed the YouTube tutorial I'm working with character for character so not sure where I've gone wrong, does anybody have any ideas?
body {
padding: 0;
margin: 0;
background-color: #ccc;
}
#wrapper {
width: 1000px;
background-color: #FFF;
margin: 0px auto;
min-height: 400px;
margin-top: 40px;
border: 1px solid #999;
border-bottom: 3px solid #999;
border-radius: 5px;
}
#formDiv {
width: 200px;
margin: 0px auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv"></div>
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>
You closed your formdiv tag to early. Use this:
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv">
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</div>
</body>
</html>
If you need to center it, you also need to center form element
#wrapper form{
width: 180px;
margin: 0 auto;
}
http://jsfiddle.net/47ku1qud/
Hello i'm having trouble aligning labels, input field and drop box in my html page. I want the labels aligned at the left and input right next to it. But it's allover the place and having trouble aligning it. I would like my form to look like this
But my page currently looks like this:
Below is my html and css code:
<!Doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Assignment 3 using Ajax" />
<!-- Title -->
<title>Assignment 3</title>
<!--CSS Styling -->
<link type="text/css" href="style.css" rel="stylesheet" />
<!-- script -->
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<header><h1> Registration </h1></header>
<form name="myForm" action="#" method="post" onsubmit="return validate()">
<fieldset>
<label for="username">Username: </label>
<input type="text" id="username" name="user" placeholder="Enter username" />
<label for="password">Password: </label>
<input type="password" id="password" name="user_p" />
<progress id="progress" value='0' max="100"></progress><span id="text"></span>
<label for="re_password">Verify Password: </label>
<input type="password" id="re_password" name="user_pass" placeholder="Re-enter password" />
<label for="email">Email: </label>
<input type="email" id="email" name="user_email" placeholder="Enter email" />
<label for="email">Verify Email: </label>
<input type="email" id="email" name="user_email2" />
<label for="question1">Security Question </label>
<select id="question1" name="question1">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer">Security Answer: </label>
<input type="text" name="user_answer1" />
<label for="question2">Security Question </label>
<select id="question2" name="question2">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer2"> Security Answer: </label>
<input type="text" id="answer2" name="user_answer2" />
<label for="mobile">Phone: </label>
<input type="text" id="mobile" name="user_mobile" />
<label for="address">Address: </label>
<textarea id="t1" rows="8" cols="40"name="user_address" style="vertical-align: top;"></textarea>
<label for="interests">Areas you may be interested in, please select one or more: </label>
<textarea id="interests" rows="10" cols="40" name="user_extra" style="vertical-align: top;"></textarea>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Red_Apple.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="110" height="40" />
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Banana.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="110" height="40" />
</div>
<div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</fieldset>
<input type="button" name="submit" value="Register" onclick="return validate()" />
<input type="button" value="Clear" />
</form>
</body>
CSS:
form {
max-width: 750px;
margin-left: 50px;
background: #f4f7f8;
border-radius: 8px;
}
label {
display:block;
text-align: right;
width:145px;
float: left;
padding-top: 5px;
}
input {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 20px;
vertical-align: middle;
}
fieldset {
margin-bottom: 30px;
border: none;
}
#box1, #box2 {
float:right;
width: 112px;
height: 42px;
border: 1px solid;
}
div#box3{
width:112px;
height:42px;
border: 1px solid;
}
Please could some lead me in the right directions of how to currently aligning the labels and input like in the first pic.
If you put each 'line' of input and label inside a wrapper div, you can easily solve the problems you're getting. The wrapper acts like a full width wrapper around the label and input of that row. Every new label & input will go onto the next line.
I also did some adjustments to your label styling, as it needs to be display: inline-block; and no float: left; is needed.
See my JSFiddle demo.
I know that you want a native css solution but I've done a bootstrap version for fun. You can check it here.
The equivalent of my solution would be to make specific width for label and input :
input,label{
display:inline-block;
width:60%;
}
label{
width:30%;
}
And make sure that the sum will be 100% or use container div as I do in bootstrap.
I am trying to center my form but even trying in all possible ways I can I am not able to achieve it.
.content {
margin: 0 auto;
padding: 0 1em;
max-width: 768px;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::Members Area::</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
</head>
<body>
<div class="page-wrap">
<div class="header">
<h1>heading</h1>
<h2 id="msg">Heading</h2>
</div>
<div class="content">
<form class="pure-form" action="" method="post" id='loginform'>
<div class="fields">
<fieldset class="pure-group center" >
<input type="text" required autofocus class="pure-input-1-2" value="" name="username" id="username" placeholder="Username">
<input type="password" required class="pure-input-1-2" name="password" id="password" placeholder="Password">
<input type="email" class="pure-input-1-2" value="" name="email" id="email" placeholder="Email">
<input type="hidden" name="type" value="login" id="type">
</fieldset>
</div>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="loginbutton" id="button" value="login">Sign in</button>
<div class="login-links">
Forgot password ?
Already have an account ? <strong>Sign in</strong>
<br />
Don't have an account ? <strong>Sign Up</strong>
</div>
</form>
</div>
</div>
</body>
</html>
The text and buttons in the field are centered but the input fields are not centered I tried adding width to the content but it didn't helped if I add <center> it works But I want to do it with css please help.
set .pure-form .pure-group input to display: inline-block instead of display: block in pure-min.css
or just override it in another stylesheet:
.pure-form .pure-group input{
display: inline-block;
}
FIDDLE
Right now I'm working on a school project where I create a bookstore. I have created the front page and now I'm trying to use php to create the login and register system. I've created the Register page (php) and I created a CSS File to go along with it, however I can't get the two to connect properly. When I run it in localhost the css won't render. I don't see a error in my code and I don't understand why it's not working. I tried to change the css name around a bit to see if the problem was the naming however nothing else seems to work.
/* Import Google Font */
#import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
.form-div {
margin: 50px auto 50px;
padding: 25px 15px 10px 15px;
border: 1px solid #80ced7;
border-radius: 5px;
font-size: 1.1em;
font-family: 'Lora', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<!--Bootstrap 4 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Other CSS File --->
<link rel="stylesheet" href="registerandlogin.css" type="text/css">
<title>Register</title>
</head>
<body>
<p>Register Today and Join the Royal Reader Community</p>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="signup.php" method="post">
<h3 class="text-center">Register</h3>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="passwordConf">Confirm Password</label>
<input type="password" name="passwordConf" class="form-control form-control-lg">
</div>
<div class="form-group">
<button type="submit" name="signup-btn" class="btn btn-primary btn-block btn-log">Sign Up</button>
</div>
<p class="text-center">Already a member?</p>Sign In
</form>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Try to add a class to your form or whatever like this:
<form class="form-div" action="signup.php" method="post">
Here you can read about css selectors: https://www.w3schools.com/html/html_css.asp
You do not have an element named .form-div, which is why your CSS does not affect anything. Try adding an element with that class name in your <form> tag.