If you name an input from the user in one html file using and tags, how do you use it in another html file?? I want to use only html. No javascript or anything.
The main file:
<HTML>
<HEAD>
<TITLE>
Harry Potter
</TITLE>
</HEAD>
<BODY text = "red" bgcolor = "green">
<CENTER><H1><B><U>Harry Potter</U></B></H1></CENTER>
Please register for HPhmR by <A href = form.html>Clicking Here</A>
</BODY>
</HTML>
Form.html:
<HTML>
<HEAD>
<TITLE>
HPhmR Resgistering
</TITLE>
</HEAD>
<BODY bgcolor = "turquoise">
<FORM action = "harry potter.html" method = "post" name = "HPhmR">
<P>Please enter your username :
<INPUT type = "text" size = "30" name = "username" maxlength = "20">
</P>
<P>Please enter your password :
<INPUT type = "password" size = "30" name = "password" maxlength = "15">
</P>
<P>Please choose your favourite character:<BR>
<SELECT name = "favcha" size = "8" MULTIPLE>
<OPTION value = "Dumbledore">Albus Dumbledore</OPTION>
<OPTION value = "Voldemort">Lord Voldemort</OPTION>
<OPTION value = "Harry">Harry Potter</OPTION>
<OPTION value = "Ron">Ron Weasely</OPTION>
<OPTION value = "Hermione">Hermione Granger</OPTION>
<OPTION value = "Sirius">Sirius Black</OPTION>
<OPTION value = "Bellatrix">Bellatrix Lestrange</OPTION>
<OPTION value = "Draco">Draco Malfoy</OPTION>
</SELECT>
</P>
<P>Select your age range :
<INPUT type = "radio" name = "10-15" value = "1">10 to 15 yrs
<INPUT type = "radio" name = "15-20" value = "2">15 to 20 yrs
<INPUT type = "radio" name = "20-30" value = "3">20 to 30 yrs
<INPUT type = "radio" name = "30-45" value = "4">30 to 45 yrs
<INPUT type = "radio" name = "45-60" value = "5">45 to 60 yrs
<INPUT type = "radio" name = "60+" value = "6">Above 60 yrs
</P>
<INPUT type = "submit" value = "Submit and Register">
</FORM>
</BODY>
</HTML>
How do I use the input from the user in form.html? I want to use that input and do something else in the main file.
You can not do that using just html.but you can use php or asp.net to send forms from one file to another.
Related
I'm trying to build a registration/login form using PHP (PHP 7.2.10), for now I'm just trying to be able to insert new users in my DB, and to log in with one of the users
<?php
//Connecion to the DB
try {
$bdd = new PDO('mysql:host=localhost; dbname=dbtest; charset=utf8', 'root', '123456');
} catch (Exception $e) {
echo "Error: ".$e;
}
//Registration form
//variables definition
if(isset($_POST['registration'])){
$name = $_POST['name'];
$first_name = $_POST['first_name'];
$nickname = $_POST['nickname'];
$age = $_POST['age'];
$sex = $_POST['sex'];
$passwd = $_POST['passwd'];
$passwd2 = $_POST['passwd2'];
$email = $_POST['email'];
$address = $_POST['address'];
$date = date('d/m/Y');
//checking mandatory fields are filled
if(!empty($nickname) AND !empty($email)){
//checking entered email is valid
if(filter_var($email, FILTER_VALIDATE_EMAIL)){
//confirming password
if($passwd == $passwd2){
// checking the entered email address doesnt already exist in the DB
$TestEmail = $bdd->query('SELECT id FROM test WHERE email = "'.$email.'"');
if($TestEmail->rowCount() < 1 ){
$bdd->query('
INSERT INTO test
(name, first_name, sex, nickname, age, address, email, passwd)
VALUES
("'.$name.'", "'.$first_name.'", "'.$sex.'", "'.$nickname.'", "'.$age.'", "'.$address.'", "'.$email.'", "'.$passwd.'", "'.$date.'")
');
} else $return = "There is already a user registered with this email address";
} else $return = "Entered passwords are not matching";
} else $return = "Please enter a valid email address";
} else $return = "At least one field is missing";
}
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Registration/Login form</title>
</head>
<body>
<?php if(isset ($_POST['registration']) AND isset($return)) echo $return; ?>
<!-- Registration/login form -->
<form action="" method="POST">
<input type = "text" name = "name" placeholder = "Name"><br>
<input type = "text" name = "first_name" placeholder = "First Name"><br>
<input type = "text" name = "nickname" placeholder = "Nickname"><br>
<input type = "text" name = "age" placeholder = "Age"><br>
<select name = "sex" placeholder = "Sex"><br>
<option value = "Male">Male</option>
<option value = "Female">Female</option>
</select><br>
<input type = "text" name = "address" placeholder = "Address"><br>
<input type = "email" name = "email" placeholder = "Email address"><br>
<input type = "password" name = "passwd" placeholder = "Your Password"><br>
<input type = "password" name = "passwd2" placeholder = "Confirm your Password"><br>
<input type="submit" name = "registration" value="Register">
</form>
<hr>
<?php if(isset ($_POST['login']) AND isset($return)) echo $return; ?>
<form action="" method="POST">
<input type = "email" name = "email" placeholder = "Email address"><br>
<input type = "password" name = "mdp" placeholder = "Your Password"><br>
<input type="submit" name = "login" value="Log in">
</form>
</body>
</html>
When trying to register a new user, I fill all the fields, then click on "register", but nothing happens, it just empties all the fields, and no data is inserted in my DB, though I get no error message.
When trying to log in, I get the following error on top of my form : "Notice: Undefined index: passwd in C:\wamp64\www\Hakikar\index.php on line 61", and besides, the message "At least one field is missing", though I filled both email and password fields
I have a form that looks like this.
What I want to do is, I want to make sure that Minimum Age < Maximum Age
and Minimum Skill Level < Maximum Skill Level
What is a way to put constraints on the inputs?
HTML
{% extends "template.html" %}
{% set active_page = "events" %}
{% block content %}
<div class="jumbo">
<h2>EVENTS PAGE</h2>
<br/>
<p>Click here to go to the welcome page</p>
</div>
<form action = "/events_success" method=post>
Event Name:<br>
<input type="text" name="eventname" required="">
<br>
Sports:<br>
<select name="sports">
{% for item in sports_data %}
<option value="{{ item[0] }}">{{ item[0] }}</option>
{% endfor %}
</select>
<br>
Location:<br>
<select name="location">
{% for item in loc_data %}
<option value="{{ item[0] }}">{{ item[0] }}</option>
{% endfor %}
</select>
<br>
Time:<br>
<input type="datetime-local" name="time" required>
<br>
Number of Players:<br>
<input type="text" name="numplayers" required>
<br>
Minimum Age:<br>
<input type="text" name="minage" required>
<br>
Maximum Age:<br>
<input type="text" name="maxage" required>
<br>
Minimum Skill Level:<br>
<input type = "radio" name = "minskill" value = "1" required> 1
<input type = "radio" name = "minskill" value = "2"> 2
<input type = "radio" name = "minskill" value = "3"> 3
<input type = "radio" name = "minskill" value = "4"> 4
<input type = "radio" name = "minskill" value = "5"> 5
<br>
Maximum Skill Level:<br>
<input type = "radio" name = "maxskill" value = "1" required> 1
<input type = "radio" name = "maxskill" value = "2"> 2
<input type = "radio" name = "maxskill" value = "3"> 3
<input type = "radio" name = "maxskill" value = "4"> 4
<input type = "radio" name = "maxskill" value = "5"> 5
<br>
<br>
Creator: {{ session['username'] }}<br>
<input type="submit" value="Send">
</form>
{% endblock %}
You can just try some javaScript to prevent the form submission if those fields fails to fulfill that condition. Please check my demo.
**Note: It's just a demo. That's why didn't put any authentication.
window.onload = function() {
let submit = document.querySelector("#submit");
function validateAge(minAge, maxAge) {
let min = parseInt(minAge, 10);
let max = parseInt(maxAge, 10);
return min >= max ? false : true;
}
function validateSkill(minSkill, maxSkill) {
let min = parseInt(minSkill, 10);
let max = parseInt(maxSkill, 10);
return min >= max ? false : true;
}
submit.onclick = function() {
let minAge = document.querySelector("#minage").value;
let maxAge = document.querySelector("#maxage").value;
let radios = document.querySelectorAll('input[type="radio"]:checked');
let minSkill = radios[0].value;
let maxSkill = radios[1].value;
if(validateAge(minAge, maxAge) && validateSkill(minSkill, maxSkill))
return true;
else {
alert("Invalid data");
return false;
}
}
}
<form id="myForm" action = "/events_success" method=post >
Minimum Age:<br>
<input type="text" name="minage" id="minage" required>
<br>
Maximum Age:<br>
<input type="text" name="maxage" id="maxage" required>
<br>
Minimum Skill Level:<br>
<input type = "radio" name = "minskill" value = "1" required> 1
<input type = "radio" name = "minskill" value = "2"> 2
<input type = "radio" name = "minskill" value = "3"> 3
<input type = "radio" name = "minskill" value = "4"> 4
<input type = "radio" name = "minskill" value = "5"> 5
<br>
Maximum Skill Level:<br>
<input type = "radio" name = "maxskill" value = "1" required> 1
<input type = "radio" name = "maxskill" value = "2"> 2
<input type = "radio" name = "maxskill" value = "3"> 3
<input type = "radio" name = "maxskill" value = "4"> 4
<input type = "radio" name = "maxskill" value = "5"> 5
<br>
<br>
<input type="submit" value="Send" id="submit">
</form>
You can use some common PHP validation techniques. These are more beneficial as less risky to injection and other exploits.
PHP:
if (empty($_POST["code"])) {
$errcode = "Verify that you're human";
} else {
$code = test_input($_POST["code"]);
if (!$_POST['code'] < $string) {
$errcode = "Make code greater than string";
}
}
HTML:
<p><label for="code">Scrambled code: </label><input type="text" name="code" id="code" /><span class="error"> * <?php echo $errcode;?></span></p>
I want to make a PHP variable the value of a hidden form input. The form is inside of my PHP (I'm echoing the form), and nothing that I have tried works.
Here's my code:
echo '
<div id = "login">
<form action = "process.php" method = "POST">
Name: <input type = "text" name = "name" required>
<!-- Here is where I need to make my PHP variable the value: -->
<input type = "text" name = "referer" style = "display: none" value = "$variable">
<input type = "submit" name = "submit" value = "Enter">
</form>
</div>
';
Try this:
?><!-- exit out of php into html-->
<div id = "login">
<form action = "process.php" method = "POST">
Name: <input type = "text" name = "name" required>
<!--Here is where I need to make my PHP variable the value:-->
<input type = "text" name = "referer" style = "display: none" value = "<?=$variable?>">
<input type = "submit" name = "submit" value = "Enter">
</form>
</div>
<?php // enter back into php
The <?= ?> is a php short tag
Also, if you still want to use echo, try this:
//note: I changed the quotes
echo "
<div id = 'login'>
<form action = 'process.php' method = 'POST'>
Name: <input type = 'text' name = 'name' required>
<input type = 'text' name = 'referer' style = 'display: none' value = '$variable'>
<input type = 'submit' name = 'submit' value = 'Enter'>
</form>
</div>
";
See this Q/A for more info
The usual string replacements "$var" don't work here , as it's all contained within a single quote string which doesn't allow for string replacements. You will have to concatenate manually
echo '
<div id = "login">
<form action = "process.php" method = "POST">
Name: <input type = "text" name = "name" required>
<input type = "text" name = "referer" style = "display: none" value = "' . $variable . '">
<input type = "submit" name = "submit" value = "Enter">
</form>
</div>
';
Try this sample here https://eval.in/506642
echo "
<div id = 'login'>
<form action = 'process.php' method = 'POST'>
Name: <input type = 'text' name = 'name' required>
//Here's where I need to make my PHP variable the value:
<input type = 'text' name = 'referer' style = 'display: none' value = '$variable'>
<input type = 'submit' name = 'submit' value = 'Enter'>
</form>
</div>
";
I have been studying bootsrap, and from what I understand, I just need to wrap my code with <div> elements of various classes.
I have built a webpage and now want to optimize it for mobile devices using Bootstrap.
Here is a portion of my code :
<body onload="initializeCharts()">
<div class = "container-fluid">
<div class = "row">
<div class = "col-lg-12">
<div id = "header">
Sales Statistics for 2015 -16
</div>
</div>
</div>
<div id = "page">
<div class = "row">
<div class = "col-lg-6">
<div id = "quadrant1">
<input type = "button" name = "zoomButton1" id = "zoomButton1" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" />
<select name = "chartType" id = "chartType" onchange = "changeChartType()" class = "chartControllers">
<option value = "nothingSelected">Select chart type</option>
<option value = "column2d">2D Column Chart</option>
<option value = "bar2d">2D Bar Chart</option>
<option value = "line">2D Line Chart</option>
<option value = "area2d">2D Area Chart</option>
<option value = "pie2d">2D Pie Chart</option>
<option value = "pareto2d">2D Pareto Chart</option>
<option value = "doughnut2d">2D Doughnut Chart</option>
<option value = "column3d">3D Column Chart</option>
<option value = "bar3d">3D Bar Chart</option>
<option value = "pie3d">3D Pie Chart</option>
<option value = "pareto3d">3D Pareto Chart</option>
<option value = "doughnut3d">3D Doughnut Chart</option>
</select>
<input type = "button" name = "chooseValuesButton" id = "chooseValuesButton" value = "Choose values" onclick = "displayChooseAlert()"
class = "chartControllers" />
<input type = "button" name = "backButton1" id = "backButton1" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" />
<div id = "chartA">
</div>
</div>
</div>
<div class = "col-lg-6">
<div id = "quadrant2">
<input type = "button" name = "zoomButton2" id = "zoomButton2" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" />
<select name = "themeColor" id = "themeColor" onchange = "changeChartThemeColor()" class = "chartControllers">
<option value = "nothingSelected" selected>Select color theme</option>
<option value = "#FFFF00">Yellow and White</option>
<option value = "#D80000">Red and White</option>
<option value = "#0000CC">Blue and White</option>
<option value = "#006600">Green and White</option>
</select>
<input type = "button" name = "backButton2" id = "backButton2" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" />
<div id = "chartB">
</div>
</div>
</div>
</div>
When I run this on my browser, I see that the columns render at the ends of the page, not like the half columns that I want. When the browser is resized to mobile size, I want the quadrant divs to come one below the other, but on
desktops I want the quadrant divs to occupy half the width of the screen.
What is wrong with my code ?
The problem lays in the size of your columns you've set.
You are using the large column that breaks immediately when you leave the large viewport. .col-lg-6 should be changed to .col-md-6 or .col-sm-6 in order to keep those two columns together for a little longer.
Using .col-xs-6 creates the column "unbreakable" since it does not drop even on mobile device. Otherwise your code seems to be all right, and if I understood the question correctly, this is what you are asking. Correct me if I'm wrong and clearify your question a bit! :)
Bootstrap file add in html file to boot strep use in php.
<script src="filename.js"></script>
And add particular file add in folder.
Here is my HTML code. In the browser, I click on the text fields and a box shows for file input. It is like I selected the type = "file" input field. Why does my HTML code do this?
<div id = "section">
<form action = "receive.php" method = "post">
<!-- Image to upload -->
<label for = "item"> Item: <input id = "item" type = "file" name = "items" accept = "image/*">
<!-- Text to enter -->
<label for = "mail"> Email: <input id = "mail" type = "text" name = "email">
<label for = "word"> Words: <input id = "word" type = "text" name = "words">
<input type = "submit" value = "Submit" name = "submit">
</form>
</div>
You need to close your <label> tags.
Otherwise, your entire form is in the <label> for the upload control, and clicking on the label will click the control.
You haven't closed your elements properly, most likely the <label> elements.
<div id = "section">
<form action = "receive.php" method = "post">
<!-- Image to upload -->
<label for = "item"> Item: <input id = "item" type = "file" name = "items" accept = "image/*"></label>
<!-- Text to enter -->
<label for = "mail"> Email: <input id = "mail" type = "text" name = "email"></label>
<label for = "word"> Words: <input id = "word" type = "text" name = "words"></label>
<input type = "submit" value = "Submit" name = "submit">
</form>
</div>