Hello everyone and happy Friday,
I would like to align to the center of the page, the title (top) and right below the search box (below the title), possibly without the search button.
Right now, I have two issues.
The first one, the search box is not align to the center.
The second one, if I eliminate the search button, the query does not work after I press Return.
How can I achieve those two challenges?
Thank you so much in advance for your help.
Below is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.site-title {
position:absolute;
top:50%;
left:50%;
margin-top:-180px;
margin-left:-280px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
}
.search input {
height: 40px;
width: 487px;
}
</style>
</head>
<body>
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' name='search'>
<input type='submit' name='submit' value='Search' >
</form>
</div>
</body>
</html>
Almost done, this is my code now. It works but the query still does not work after I press the Enter key.
This is again my code with the suggested modifications:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.content {
text-align: center;
padding-top: 50px;
}
.site-title h1 {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
display: inline-block;
width: 487px;
}
.search input {
height: 40px;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
</script>
</head>
<body>
<div class="content">
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' class="submit_on_enter" name='search'>
</form>
</div>
</div>
</body>
</html>
Here is an example of how it might work for you:
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
.content {
text-align: center;
padding-top: 50px;
}
.site-title h1 {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
display: inline-block;
width: 487px;
}
.search input {
height: 40px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' class="submit_on_enter" name='search'>
</form>
</div>
</div>
There are many alternative to how to send a form 'without' a submit button. The one I picked here comes from Submitting a form by pressing enter without a submit button. You can look there for more options and details about this.
Also you might want to checkout something like bootstrap and it's templates. For this purpose this one could bee easy to modify https://getbootstrap.com/examples/signin/.
Related
I have tried to use justify content but the content contiously stacks on top of the other
below is my code and why i have tried
input
button
input
input
button
Above is how i would like the layout to look
I tried implementing classes for each and every input but coudnt make the not stack on top of each other any help would be greatly aprreciated.
<?php
if (isset($_POST["submit_address"]))
{
$address = $_POST["address"];
$address = str_replace(" ", "+", $address);
?>
<iframe padding ="5px" width="100%" margin="5px" height="600px" src="https://maps.google.com/maps?q=<?php echo $address; ?>&output=embed"></iframe>
<?php
}
if (isset($_POST["submit_coordinates"]))
{
$latitude = $_POST["latitude"];
$longitude = $_POST["longitude"];
?>
<iframe padding ="5px" width="100%" margin="5px" height="600px" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longitude; ?>&output=embed"></iframe>
<?php
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Livestock Dashboard</title>
<style>
button{
width: 7%;
height: 45px;
background: #2364d2;
border: none;
border-radius: 5px;
font-size: 22px;
font-weight: 500;
font-family: "Source Sans Pro", sans-serif;
box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
color: #fff;
margin-top: 20px;
cursor: pointer;
}
input{
text-align: center;
width: 50%;
height: 40px;
border-radius: 5px;
box-shadow: none;
border: 1px solid #ced6e0;
transition: all 0.3s ease-in-out;
font-size: 18px;
padding: 5px 15px;
background: none;
color: #1a3b5d;
font-family: "Source Sans Pro", sans-serif;
}
body {
background-image: url('bull.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<form method="POST">
<p>
<input type="text" name="address" placeholder="Enter address">
</p>
<div style="justify-content:left; align-items:center; display:flex;">
<button type="submit" name="submit_address" style ="
">
Submit
</button>
</div>
</form>
<form method="POST">
<p>
<input type="text" name="latitude" placeholder="Enter latitude">
</p>
<p>
<input type="text" name="longitude" placeholder="Enter longitude">
</p>
<div style="justify-content:left; align-items:center; display:flex;">
<button type="submit" name="submit_coordinates">
Submit
</button>
</div>
</form>
</body>
</html>
I tried using justify content on the div but id didnt work
The English is quite difficult to understand but hopefully this will help you.
Add the following to the style in your <form>:
style="display: flex; justify-content: stretch;"
Change the justify-content and center as fit. An easy to understand list of possible options you can use can be found here, or you can use a better documented list from Mozilla.
This will make make your inputs and submit button be next to each other rather than stacked.
A mock on CodePen can be found here.
Also, remove the width: 7%; from your button's style.
is there a reason why the outcome from a form "enctype" is so different between plain text and multipart form-data? Is there a way to get the data from "multipart/form-data" in a breakdown layout?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Design Survey Tracker Form</title>
<style>
h1 {
font-size: 24px;
font-style: bold;
font-family: Verdana;
padding: 10px;
}
h2 {
font-size: 20px;
font-family: Verdana;
padding: 10px
}
p {
font-size: 16px;
font-family: Verdana;
padding: 10px;
min-width: 33%;
}
form {
font-size: 16px;
font-family: Verdana;
padding: 10px;
align-items: left;
}
select,input,button {
font-size: 16px;
font-family: Verdana;
border-radius: 5px;
border-width: 0.2rem;
cursor: pointer;
padding: 10px;
vertical-align: middle;
}
label {
font-size: 16px;
font-family: Verdana;
padding: 10px;
min-width: 33%;
}
</style>
</head>
<body>
<header style="background-color: white; padding: 20px;">
<p style="font-size: 12px;">This is a designated form <br>
Please fill the form with relevant information and submit. <br>
For any query or assistance, please ask to <a href = ></a></p>
</header>
<main style="background-color: #d9e3f0; padding: 20px;">
<form action="MAILTO:" enctype="text/plain" method="post">
<h2>1. Site Name</h2>
<label for="site-name">What's the site you're reporting from?</label>
<select required name = "What's the site you're reporting from?" id="Site Name" style="width:350px">
<option value="Site A">Site A A</option>
<option value="Site B">Site B</option>
</select>
<h2>2. Project Form</h2>
<label for="phase">Which phase/form are you applying? (In brackets you can find role suggestion for submission)</label><br><br>
<input required type = "radio" name = "phase" value = "A">Test Site A<br>
<input required type = "radio" name = "phase" value = "B">Test Site B<br>
<h2>3. Submission Date</h2>
<label for="submission-date">What's the date of the submission you're reporting?</label>
<input type="date" name="sumbission" id="date">
<h2>4. Action Responsible/Owner</h2>
<label for="owner">Who's the Author/Owner of this action?</label>
<form>
<input required type="text" name="Author" placeholder="Enter the Author/Owner of this action" id="author" style="width: 300px;"><br>
<input type="submit" value="Submit" style="width: 300px;">
</form>
</main>
</body>
</html>
This is what I get when I put plain text:
What's the site you're reporting from?=Site A
phase=A
sumbission=2066-01-01
Author=John Doe
this is what i get when it's multipart form-data:
What%27s+the+site+you%27re+reporting+from%3F=Site+A&phase=A&sumbission=2001-01-01&Author=John+Doe
Also, is there a way to format the text coming out from form action?
Like any script the get the data, reformat and send it as an email? Any pointers on it is appreciated.
Thanks!
I'm trying to add a vag font inside my form. i placed the "VAG Rounded Std-Black.otf" font in a folder outside name "fonts" to link it. but i still cant get it to work in a form text field?
any help to the solution would be helpful. thx yummi
<style type="text/css" href="/fonts">
#font-face {
font-family: vag;
src: url(fonts/VAG Rounded Std-Black.otf);
}
body {
background-color: dimgrey;
font-family: Arial;
color: white;
font-size: 20px;
margin: 50px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 40px;
border: none;
outline: none;
padding-left: 37px;
font-family: vag;
font-size: 14px;
color: white;
font-weight: bold;
letter-spacing: .5px;
background-color:grey;
}
<!-- input message -->
<form><input style="color:white;font-family: vag;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
You can check This Code
I've Used Google fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght#700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<form><input style="color:black; font-family: 'M PLUS Rounded 1c', sans-serif;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
</body>
</html>
I tried using different editors and IDEs (netbeans and visual studio code) along with different browsers (firefox developers edition), yet, I can't seem to get the css sheet to apply to the main html file.
The style sheet editor is saying that there is no style sheet attached to the html file
Here's the html file:
<!DOCTYPE html>
<html>
<head>
<title>The Animal Game</title>
<meta charset="utf-8"/>
<link href="animalgame.css" type="text/css" rel="stylsheet" />
<script src="animalgame.js" type="text/javascript"></script>
</head>
<body>
<h1>The Animal Game</h1>
<p>Think of an animal, then let me guess it!</p>
<div id="container">
<fieldset>
<legend>Questions</legend>
<p id="questions"></p>
</fieldset>
<fieldset id="answer">
<legend>Answer</legend>
<button id="yes">Yes</button>
<button id="no" >No</button>
</fieldset>
</div>
</body>
</html>
CSS style sheet:
body {
font: 12pt "Century Gothic", "Helvetica", "Arial", sans-serif;
}
button {
font-size: 20pt;
font-weight: bold;
margin: 15px auto;
}
#container{
margin: auto;
width: 520px;
}
fieldset {
background-color: #F0F0F0;
float: left;
height: 150px;
margin-right: 15px;
text-align: center;
}
h1, p {
text-align: center;
}
#questions {
font-size: 16pt;
text-align: center;
width: 300px;
}
EDIT: problem solved! There was a typo. Thank you for all hints
You have a typo in rel="stylsheet" it should be stylesheet
I've done everything to try work this out but here's my problem:
It happened after wrapping my table in a form, Anyways, if possible I need this centred unless my centring is correct. Please tell me what I did wrong and what I should do next time!
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Game</title>
</head>
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table>
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}
Its because of the login ID, you have given it 15% width. Increase it to 50 or 60% and it will work.
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
Working example:
http://jsfiddle.net/vcz72sxy/1/
EDIT
I have changed some code from the previous poster, added the align value within the table to center it.
http://jsfiddle.net/kc3gh83h/1/
There are two issues:
You've called id="login" twice, you can only call it once. So the rule for #login is being applied twice. If that was intentional, you want to change it to a class (.login)
The second, which takes care of the issue directly (as #Dan and #JSG have said) - change your width.
Here you go. Use this and you'll be set! Demo: http://jsfiddle.net/hfnqbboj/2
HTML
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table align="center">
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
CSS
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}