Im stuck with a project. This is strictly for a company internal employee login page. Not public! For those that might question the security of this form. Although, I am open to hashing the pincode password (SHA-1).
I've setup the code on my jsfiddle PINCODE LOGIN
<body onLoad="emptyCode()" class="hold-transaction login-page">
<!-- Page Content -->
<div class="login-box">
<div class="login-logo">
<b>PINCODE LOGIN</b>
<p class="login-box-msg">Employee Sign-in</p>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<!--<form action="" method="post">-->
<div class="main_panel">
<form action="" method="post">
<div class="input-group">
<input type="text" name="code" maxlength="4" readonly="readonly" class="form-control" placeholder="Enter PIN...">
<span class="input-group-btn">
<button class="btn btn-danger" type="reset" >X</button>
</span>
</div>
<!-- /input-group -->
<table id="keypad" cellpadding="5" cellspacing="3">
<tbody>
<tr>
<td onclick="addCode('1');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>1</span>
</div>
</td>
<td onclick="addCode('2');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>2</span>
</div>
</td>
<td onclick="addCode('3');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>3</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('4');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>4</span>
</div>
</td>
<td onclick="addCode('5');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>5</span>
</div>
</td>
<td onclick="addCode('6');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>6</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('7');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>7</span>
</div>
</td>
<td onclick="addCode('8');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>8</span>
</div>
</td>
<td onclick="addCode('9');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>9</span>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td onclick="addCode('0');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>0</span>
</div>
</td>
</tr>
</tbody>
</table>
<p id="message">ACCESSIGN...</p>
</form>
</div>
<!--</form>-->
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>
My goal for this is:
Allow employees to login using a 4 digit pincode and verify
against DB credentials
BONUS: Hash password in DB
Not sure if i would need a function such as " if(isset($_POST['code'])) {", as a separate file.
At first, you close the form tag at the end of the form, wich means nearly your whole page is posted back to your server. You can minify this:
<form action="secret.php" method="post">
<input name="code">
</form>
Now it is posted to the "secret.php" specified in the action tag.
This would look like this:
Secret.php:
<?php
if(isset($_POST["code"])){
if($_POST["code"]=="5473")){
echo "successfully logged in...";
$_SESSION["logged"]=true;
}else{
echo " wrong code";
}
}else{
echo "404: this is not accessible for you";
}
?>
This checks if the code is posted and if its 5473. if its correct, it sets a session wich helps you identifying the user.
Simply do:
<?php
if(isset($_SESSION["logged"])){
echo " logged in user...";
}else{
echo "not for you.please log in";
die();
}
?>
I updated my code. This function seems to work great!
function loginEmployee() {
global $connection;
$pincode = $_POST["code"];
if(isset($_POST["code"])){
$result = mysqli_query($connection,"SELECT * FROM users WHERE user_pin = '$pincode'");
if(mysqli_num_rows($result) != 0) {
echo "<p class='alert-successs'>successfully logged in...</p>";
header("Location: ../repairs.php");
die();
$_SESSION["logged"]=true;
}else{
header("Location: ../login_fail.php");
die();
}
}else{
echo "404: this is not accessible for you";
}
Related
I am creating a survey app that dynamically adds a dropdown box , and two text boxes.Once an option is selected from the dropdown it populates the selected option . Unforunately the first option works but for the others it simply populates the data I selected in the first.The overall goal is to input it inside a database using php.This is my php script
<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$number = count($_POST["name"]);
$crops = count($_POST["selectedCrop"]);
// echo $number;
// echo $crop;
if ($number > 0) {
for ($i=0; $i<$number; $i++) {
if (trim($_POST["name"][$i] != '')) {
$sql = "INSERT INTO tbl_name(name,crop) VALUES('".mysqli_real_escape_string($connect, $_POST["selectedCrop"][$i])."' ,'".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";
mysqli_query($connect, $sql);
}
}
echo "Data Inserted";
} else {
echo "Please Enter Name";
}
The result are as follows The Image with the duplicated resukts
Here is my HTML Code and the Javascript I am using to achieve
<body>
<div class="container">
<div class="page-header">
<h1 class="text-center">SURVEY</h1>
</div>
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<strong>E. FARMING AND AGRIBUSINESS </br>Farming</strong>
</div>
<div class="panel-body">
Which of the value chains did your household produce in September 2016 through rain fed production mechanisms? Or you produce now through rain fed production mechanisms?<i>Select all options applicable – 1, 2 up to last</i>
<br />
<form name="add_name" id="add_name">
<!-- This is the Table That I am adding the widgets dynamically -->
<table class="table table-striped table-bordered" id="dynamic_field">
<thead>
<tr>
<th>Name of Crop Options</th>
<th>Crop Selected</th>
<th>Produced/produce this value chain in 2015/2016?</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dropdown" name= "crops[]">
<button id="crop" onchange="copyValue()" class="btn dropdown-toggle" type="button" data-toggle="dropdown" >
Name of Crop<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Maize</li>
<li>Beans</li>
<li>Tomatoes</li>
<li>Potatoes</li>
</ul>
</div>
</td>
<td>
<input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</td>
<!-- <td><button type="button" name="remove" id="'0'" class="btn btn-danger btn_remove">X</button></td></tr> -->
</tr>
</tbody>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div class="dropdown" name= "crops[]"><button class="btn dropdown-toggle" type="button" data-toggle="dropdown" >Name of Crop<span class="caret"></span></button><ul class="dropdown-menu"><li>Maize</li> <li>Beans</li><li>Tomatoes</li><li>Potatoes</li></ul></div></td><td><input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"farming_and_agribusiness_1_copy.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
$(function(){
$(".dropdown-menu li a").click(function(){
$("#crop:first-child").text($(this).text());
$("#crop:first-child").val($(this).text());
$("#selectedCrop:first-child").text($(this).text());
$("#selectedCrop:first-child").val($(this).text());
});
});
</script>
<!-- Survey - END -->
</div>
</body>
Is possible with one JavaScript function and a button send email an already printed html table ?
<table id="mytable">
</table>
I did a PHP function and i call everyware i need to send my results.
The call
<?php SendEmailForm("MyIdElementToSend"); ?>
and the function
function SendEmailForm ($MyIdElementToSend){
?>
<form id="EMailForm" action="SendMail.php?SendMail=true" method="post">
<div class="form-group">
<div class="row">
<div class="hide">
<input id="msg" type="text" class="form-control" name="msg" value="" />
</div>
<div>
<button id="sub" type="submit" class="btn btn-primary"><i class="fa fa-envelope" aria-hidden="true"></i> Send</button>
</div>
</div>
</div>
</form>
<script>
document.getElementById("msg").value = document.getElementById("<?php echo $MyIdElementToSend ?>").outerHTML;
</script>
I am unsure why my javascript form submission validation is not working – any help would be much appreciated.
I have 2 tables with a class: table-first & table second
Using media query, when screen is less than 740px table-first is hidden and table-second is displayed
table-first has a class “voucher_input” on the input field for a voucher &
table-second has a class called “voucher-input2” on the voucher input field
I have written a javascript to prevent submission of the form if the voucher input field is empty
And if empty it should prompt up an error message
The code works well for “table-first” with the class “voucher-input” – a form is not submitted when the voucher input field is empty
But the code does not work well with “table-second” with the class “voucher-input2” – the form submits with an empty voucher input field.
Can one please advise me on what is wrong with my code as I want the input fields with the “voucher-input” & “voucher-input2” to prompt up an error message when the field is empty
My code are as below. Many thanks
my javascript code: is intended to prompt up an error message if the voucher fields with the class voucher_input & voucher_input2 are empty - it currently only prompts up an error message for voucher_input and not voucher_input2
$(document).ready(function () {
var form = $("#vouchers_form");
$("#vouchers_form").on("submit", function(e){
// e.preventDefault();
var voucher_input = $('.voucher_input').val();
var voucher_input2 = $('.voucher_input2').val();
if (voucher_input.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else if (voucher_input2.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else {
form.submit();
}
});
});
html code: table-first with the input field <input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<div class="main-table table-first">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</td>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<ul>
<li>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</li>
<li>
<p class="voucher-header">Do you have a Promo code?</p>
<div><input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
</li>
</ul>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
html code: table-second with the input field <input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<!-- reponsive design displayed when width screen is below 740px -->
<div class="main-table table-second">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content paypal">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content card">
<div class="cards-visa-master">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<p class="voucher-header ">Do you have a Promo code?</p>
<div><input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
</div>
The error may be due to a duplicate ID on the page.
If both of these tables are on the same page the error block shouldn't have the same ID (popupErrorConfirmVoucherEmpty) as there should only be one ID on the page. Try changing the name of the second one to popupErrorConfirmVoucherEmpty2 and altering the JS accordingly
I am generating a report for which i need html of form with input values also. I am saving the form(page's HTML) with inputs given to the form into a variable. But when i save it the inputs are not coming into it.
How to save the values into it?
HTML :
<form method="POST" action="<?php echo BASE_URL . 'php/processing/formInput/formDataInputProcesing.php?id=' . $_GET['id']; ?>" >
<div id="formHtml">
<?php echo $formHtml; ?>
<hr>
</div>
<input type="hidden" value="" id="formHtmlValue" name="hiddenvalue" >
<div class="text-center">
<button type="submit" class="btn btn-info" name="submitData" id="submitData"><i class="fa fa-check">Submit</button>
</div>
<hr>
</form>
Javascript/JQuery :
<script type="text/javascript">
$('#submitData').click(function(){
var html = $('#formHtml').html();
$('#formHtmlValue').val(html);
});
</script>
I am using old method
<form method="POST" onsubmit="setValue(this)" action="<?php echo BASE_URL . 'php/processing/formInput/formDataInputProcesing.php?id=' . $_GET['id']; ?>" >
<div id="formHtml">
<?php echo $formHtml; ?>
<hr>
</div>
<input type="hidden" value="" id="formHtmlValue" name="hiddenvalue" >
<div class="text-center">
<button type="submit" class="btn btn-info" name="submitData" id="submitData"><i class="fa fa-check">Submit</button>
</div>
<hr>
</form>
<script language=javascript>
function setValue(v)
{
var tableContent=document.getElementById("formHtml").innerHTML;
v.formHtmlValue.value=tableContent;
return true;
}
</script>
Here is another example:
<html>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<body>
<form method="POST" action="abc.php?id=123" onsubmit="setValue()" >
<div id="formHtml">
<table>
<tr>
<td>
<input type=text name="t1"><span id="t1Value"></span>
<input type=radio name="r1" value="r1" checked><span id="r1Value"></span>
<input type=checkbox name="c1" value="c1" checked><span id="c1Value"></span>
</td>
</tr>
</table>
<hr>
</div>
<input type="hidden" value="" id="formHtmlValue" name="hiddenvalue" >
<div class="text-center">
<button type="submit" class="btn btn-info" name="submitData" id="submitData"><i class="fa fa-check">Submit</button>
</div>
<hr>
</form>
<script language=javascript>
function setValue()
{
var formHtml=$("#formHtml");
$("#formHtml input").each(function()
{
//console.log($(this).attr("name")+","+$(this).val());
itemName="#"+$(this).attr("name")+"Value";
$(itemName).html($(this).val());
$(this).remove();
});
$("#formHtmlValue").val($("#formHtml").html());
}
</script>
</body>
</html>
I am a beginner in web design and i created a simple web application to just collect some information and i want it to send the inputted data to a server to store it for me. I really need a simple code to input within my code to send it to the server and save it.
<style>
#Home { background-color:whitesmoke;}
#Site_Details { background-color:snow;}
#Dredger_Details { background-color:ghostwhite;}
img { width:800px;
height:500px
}
</style>
<style type="text/css">
td, th { border: 1px solid #CCC; }
table {border: 1px solid black; }
</style>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
<!-- Start of first page: #Home -->
<div data-role="page" id="Home">
<div data-role="header" data-theme="a">
<h1><strong><font size="5">WELCOME</font></strong></h1>
</div>
<!-- /header -->
<p><font size="30"><strong>Welcome.</strong></font></p>
<img src="img/Image31.jpg" /><br />
<p>Please click here to continue.</p>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="5">WELCOME</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of Second page: #Site_Details -->
<div data-role="page" id="Site_Details">
<div data-role="header" data-theme="a">
<h1><strong><font size="3">SITE AND DREDGER'S NAME AND TARGET.</font></strong></h1>
</div>
<!-- /header -->
<div style="color:blue">
<p><font size="5">Please fill in the following details.</font></p>
</div>
<form>
<label for="textinput-s"><font size="6"><strong>Site:</strong></font></label>
<input name="textinput-s" id="textinput-s" placeholder="SIte..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<label for="textinput-s"><font size="6"><strong>Dredger Name:</strong></font></label>
<input name="textinput-s" id="text1" placeholder="Dreder Name..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<label for="textinput-s"><font size="6"><strong>Daily Dredger Target:</strong></font></label>
<input name="textinput-s" id="text2" placeholder="Dreder Target..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
</form>
<p>Please click here to continue.</p>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="3">SITE AND DREDGER'S NAME AND TARGET.</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of Third page: #Dredger_Details -->
<div data-role="page" id="Dredger_Details">
<div data-role="header" data-position="fixed" data-theme="a">
<h1><strong><font size="5">DREDGER ACTIVITY.</font></strong></h1>
</div>
<!-- /header -->
<table>
<tr>
<th>
<font color="blue" size="5"><strong>Date:</strong></font>
</th>
<th colspan="8">
<label for="date"></label>
<input type="date" name="date" id="date1" value="" />
</th>
</tr>
<tr>
<td>
<form>
<h4>Start Time:</h4>
</form>
</td>
<td>
<form>
<label for="time"></label>
<input type="time" name="time" id="time" value="" />
</form>
</td>
</tr>
<tr>
<td>
<form>
<h4>End Time:</h4>
</form>
</td>
<td>
<form>
<label for="time"></label>
<input type="time" name="time" id="time1" value="" />
</form>
</td>
</tr>
<tr >
<td>
<strong>Effective Dredging(Mins):</strong>
</td>
<td>
<input id="txtChar" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Effective Dredging(Mins)..." />
</td>
</tr>
<tr>
<td>
<strong>Other Activities/Downtime(Mins):</strong>
</td>
<td>
<form>
<input id="Number1" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Other Activities/Downtime(Mins)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Main Eng(Hrs):</strong>
</td>
<td>
<form>
<input id="Number2" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Main Eng(Hrs)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Aux Eng(Hrs):</strong>
</td>
<td>
<form>
<input id="Number3" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Aux Eng(Hrs)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Main Eng Av. Diesel Usage (Ltrs/h):</strong>
</td>
<td>
<form>
<input id="Number4" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Main Eng Av. Diesel Usage (Ltrs/h)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Comments:</strong>
</td>
<td>
<div data-role="fieldcontain" style="padding:10px; margin:10px; ">
<textarea cols="500" rows="100" name="textarea" placeholder="Comments..." id="textarea5" style="height:300px;"></textarea>
</div>
</td>
</tr>
</table>
<form>
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
Cancle
</form>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="5">DREDGER ACTIVITY.</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page three -->
For that, you first need some code written in PHP , java or any other language running on your web server to process and save the form data.
every input field you put inside the tag will be send to the server when you submit the form. modify the action parameter of form to point to the code you have to handle data at server.
<form method = "post" action = "URL">
<input type="text" name="">
.
.
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
Cancle
</form>
As a beginner in web development you could have a good look at this free video tutorial about web forms.
http://webdesign.tutsplus.com/courses/web-form-design-and-development
After having gone through that you should know exactly what to do and will be well equipped for any form related questions in the future.
Too long for a comment:
Many things are not as they are supposed to.. The form tag should be around all the inputs providing data. It collects its information from its children (inputs) and sends it to a url. In your example, even with adding an action, you'll only get 1 or 2 inputs sent to your server. As mulla.azzi mentioned, you need to provide an action attribute as well. I don't know whether the script tags above are working, but language="Javascript"? never heard of it ... It can go on for quite a while..
While I strongly encourage following web design, and I see you've already tested and tried a bit, there really is a lot out of place in your code snippet. I strongly suggest you follow some tutorials / courses. Not only about HTML / CSS / JS, because that's the easy part. Everyone can write that. But also about the basic principles of stateless applications, server - client interaction. And you will also need to learn how you can recieve the data and do something with it..
Sadly, while there is a very low treshold to start building web pages (html, css), there's still a lot to learn untill you can actually build a functioning website.