I'm trying to learn mysqli and so I thought I'd put what I learned to the test. I'm just trying to get the mark up right for a login page to do some simple query's. So the first thing I did was set up a form to collect the first name and password from the user. I wanted a little space in between the two inputs (and another for submit). Since they are "stacked" on top of each other I thought I would do it with this code (the css does connect)
`#logininput{
margin-top:5 px;
}`
really simple easy css. But it did nothing so I tried setting in to margin instead of margin-top. Still nothing. Here is the markup used.
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form action="index.php" method="post">
<input type="text" id="logininput" name="Fname"><br/>
<input type="text" id="logininput" name="Lname"><br/>
<input type="submit" id="logininput"name="loginS"><br/>
</form>
</body>
Anyone know why it is not working? (as a note there is a pair of php tags with a require in them for connecting to a DB)
The problem is that there is a space between the value of margin an the units. It should be
margin-top: 5px;
without the space between '5' and 'px'
You should use class instead when you want to style more than one element, with id, only the first occurrence will get the styles:
.logininput {
margin-top: 5px;
}
<form action="index.php" method="post">
<input type="text" class="logininput" name="Fname"><br/>
<input type="text" class="logininput" name="Lname"><br/>
<input type="submit" class="logininput" name="loginS"><br/>
</form>
Related
I am using the "placeholder" attribute in HTML5. I use it in a PHP web page with an HTML section. It works as expected.
Here is my code (it was modified slightly from the w3schools website):
<!DOCTYPE html>
<html>
<body>
<form action="/nextpage.php">
<input type="text" name="firstname" placeholder="John"><br>
<input type="text" name="lastname" placeholder="Doe"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
As a user with the web page I tried using a form with the placeholder element and I clicked submit, but it acts like the field is empty if I do not change the default text that appears in light gray.
I want the text to be real -- and not act as though the field is empty. If the user changes the placeholder text in the fields, then that is fine. But if the user does not touch the placeholder text, I want the "Submit" click to ingest the placeholder text as if the user typed it in manually. How do I do this? I tried a variety of different things, but I cannot get it to work. The text could appear black -- but this does not matter. I want the text to be in the field if the user does not delete it or change it.
Also set the "value" param
<input type="text" name="firstname" placeholder="John" value="John">
It will have the user delete the placeholder but if nothing is changed then it is sent
Change placeholder to value
<!DOCTYPE html>
<html>
<body>
<form action="/nextpage.php">
<input type="text" name="firstname" value="John"><br>
<input type="text" name="lastname" value="Doe"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
$("#firstname").on("click", function() {
$(this).val("")
});
$("#lastname").on("click", function() {
$(this).val("")
});
</script>
working jsfiddle : http://jsfiddle.net/Yu97Z/291/
A good approach to handling this type of thing is to provide the field with a default value when the page is loaded. For example:
<input type="text" name="firstname" value="John" placeholder="John">
That will pre-populate "John" in the input field making it so the user would not have to modify it if they chose not too. Perhaps then it would also make sense for placeholder to read something like "First Name", should someone remove the text altogether.
I'm having a bit of a problem with a form. I need to send its information to 2 different pages for two different uses. One of the pages will show what was inserted in the form and the other one will use the form's title as a link to the other page.
The code I'm using is below. Right now, it only takes the form info and shows it in the View.php page.
I'm pretty sure I'll have to use some PHP in here, but I'm out of ideas.
<html>
<head>
<title>!!!!Protótipo de Formulario de Noticia!!!!</title>
<style>
textarea{
resize:none;
}
</style>
</head>
<body>
<form method="post" action="View.php">
<p>Titulo: <input type="text" name="Titulo" required/></p>
<p>Digite o texto da noticia abaixo:</p>
<textarea rows="10" cols="50" name="Noticia" required></textarea>
<br>
<input type="submit" value="Publicar" onsubmit="location.href='View.php;'" />
</form>
</body>
</html>
you do not need
onsubmit="location.href='View.php;'
The simplest approach is to submit to one page, which acts as a controller. It can process the data, and selects a template for displaying the next page.
If needed, you can also pass data across pages with either a session, or http query params (url?id=1234)
I have a question and maybe there is a better method of doing it beside php but i am throwing the idea out there... let me know your expert advice.
I will have a pre designed certificate i will create in PHP and design in HTML.
User will be directed to a page to enter the name to print on the certificate.
the end result will be sized to 8 1/2" by 11" ready to print.
Image which shows what I am requesting: Example of Design
What is the best way to approach this? or is there something thats pre made and can be customized for my request?
Here's an example in Javascript.
HTML:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
Enter Name:
<input id="who" type="text" />
<input id="submit" type="button" class="btn" value="Submit" />
<div id="certificate" style="text-align:center;display:none;">
<h1>Certificate of Merit</h1>
<h3>Presented To:</h3>
<h4 id="name"></h4>
<hr />
<h2>Congratz</h2>
</div>
Javascript:
$('#submit').click(function() {
$('#name').html($('#who').val());
$('#certificate').fadeIn();
});
JSFiddle: http://jsfiddle.net/6SWVV/1/
I am testing Html form using post method and got this odd result:
I have two html pages on server apache (already installed php): post.html and target.html, and the code for these page are followings:
post.html (don't worry about the html standard)
<div style="text-align: center">
<form method="POST" action="target.html">
<input type="text" name="testname" value="sometext" />
<input type="submit" value="submit" />
</form>
</div>
and target.html
<html>
<head>
</head>
<body>
<h1>Target page</h1>
</body>
</html>
When I entered data to the form on post.html page and hit submit button, I got to the target.html page. When on this page(target.html), I refreshed the page, and what I receive is a blank page. The second time I refreshed, It turned to normal Html page.
I don't know why it returned a blank page the first time I refreshed, I have tried the same approach but with PHP page, and the content of target page (assum name target.php) still remains (not blank like html files above)
So, could you explain me about this problem?
Thank you.
This definitely has something to do with your browser. Same here on a mac using Safari, on some pages after submitting the content, the page seems to freeze, I refresh it, and then it works again.
Definitely not a code problem, as far as I'm concerned.
It's because you cannot pass an input from html to html file. Your target.html should be a php file (target.php).
and try to put this code on your target.php
<?php
var_dump($_POST); //this will show the inputted text and also show the data type and will stop the code execution here. other codes below will not be executed.
echo $_POST['testname'];
?>
Additionally, change target.html to target.php in your form action
First I will start out by correcting your post.html
<div style="text-align: center;"> <!-- added a ; after center -->
<form method="POST" action="target.html">
<input type="text" name="testname" value="sometext" />
<input type="submit" value="submit" />
</form>
</div>
that may not matter but you should end all your styles with ;
To continue, everything looks fine. maybe something weird happened between refreshes.
save your form page in php than add the php script in the same page, here try this. remember save in .php.
<?php $testname = $_Post['testname'];
echo $testname ?>
<div style="text-align: center">
<form method="POST" action="">
<input type="text" name="testname" value="sometext" />
<input type="submit" value="submit" />
</form>
</div>
I am using this form and its appearing as it should in dreamweaver but when I use it in on the website its big again. the site is loaded via include as dynamic content (php).
<form action="index.php" method="get">
<input type="hidden" name="content" value="home" />
<label>Go to
<input style height="20" width="40" type="numeric" name="page" />
</label>
<input type="submit" value="Go" />
</form>
I appreciate any help!
Add style="width:Npx; height:Mpx;" where needed in favor of the deprecated width and height HTML attributes.
Example:
<form action="index.php" method="get">
<input type="hidden" name="content" value="home" />
<label>Go to
<input style="height:20px; width:40px" type="numeric" name="page" />
</label>
<input type="submit" value="Go" />
</form>
Or, use the width property in CSS: <form style='width:##px'> The <form> element is displayed by default as block, therefore it strecthes all over the width of its parent
Although other the other answers here will probably work, inline style tags should ideally be avoided.
Really, you should set up a CSS stylesheet, give the input element a class and set the styles you want for this class in the stylesheet. The advantage of doing it this way is that if you have a more than form element like this in your website you can just add the class name and it will be appear in the same way (this is especially important if you change how things look).
Using CSS has a learning curve, but it will pay off many times in the long run.