I am new to php.
And i am using following code to show a form
<div class="wrapperReg">
<div id="searchContainer" style="display: inline; margin-top: 20px">
<form>
<label class="ringSetName" style="font-size: 16pt;" >Firstname</label>
<input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>
</form>
</div>
<div id="searchContainer" style="display: inline; margin-top: 20px">
<form>
<label class="ringSetName" style="font-size: 16pt;" >Lastname</label>
<input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>
</form>
</div>
<div id="searchContainer" style="display: inline; margin-top: 20px">
<form>
<label class="ringSetName" style="font-size: 16pt;" >Email</label>
<input id="nameBox" style="width:250px; margin-top:10px; margin-left:30px; height:30px;" name="q" type="text"/>
</form>
</div>
<div id="searchContainer" style="display: inline; margin-top: 20px">
<form>
<label class="ringSetName" style="font-size: 16pt;" >Phone</label>
<input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>
</form>
</div>
<div class="submit" style="display: inline;" style="margin-top: 10px">
<input type="button" value="Submit" class="submit-text"/>
</div>
CSS is as follow
.wrapperReg{
overflow: hidden;
width: 100%;
height: 100%;
}
It is showing stuff as below
How can i align so that all the elements are aligned horizontally inside the main div and The Text should be base aligned and also the Input fileds be vertically aligned to each.
Also Need to place the submit button aligned horizontally too.
How about using float?
label{float: left;}
label + input{float: right;}
And add overflow:hidden to your form. And wrap your form elements in one form.
label {float: left; width: 200px; clear: left}
label + input {float: left; width: 150px}
ID should be unique in whole document, use class for searchContainer.
Related
I'm currently making a website using PHP, HTML and a classless CSS (Water.css) Right now, I have a problem aligning my search bars and buttons into a row
<!-- Search Bar Name-->
<form action="search.php" method="GET">
<input type="text" name="query" placeholder="Search Equipment">
<input type="submit" value="Go">
</form>
<!-- Search Bar Price-->
<form action="searchprice.php" method="post">
<label for="min_price">Minimum price:</label>
<input type="text" name="min_price" id="min_price">
<label for="max_price">Maximum price:</label>
<input type="text" name="max_price" id="max_price">
<input type="submit" name="submit" value="Search">
</form>
<button onclick="window.location='add_equipment.php'">Add Equipment</a></button>
The search bars and the button work perfectly fine, however I have no clue why it stacks up like a column instead of being in a row.
It would be nice if someone could help me with this, I am a newbie to HTML
Not sure if this is what you are looking for:
Like Amir said lots of information on using divs,flex,grid in css. I feel like the classless link is making your inputs do that everytime I link to it, it puts everything in columns.
<!DOCTYPE html>
<html>
<head>
<title>Equipments</title>
<meta charset="utf-8">
<link rel="stylesheet" a href="./css/main.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css#2/out/water.min.css"> -->
</head>
<body>
<div class="nav">
<h2>List Of Equipments</h2>
<div class="navs">
<!-- Search Bar Name-->
<form action="search.php" method="GET">
<label for="Search">Search Equipment</label>
<input type="text" name="query" placeholder="Search Equipment"><br>
<input id="Sbutton" type="submit" value="Go">
</form>
</div>
<!-- Search Bar Price-->
<div class="navs">
<form action="searchprice.php" method="post">
<label for="min_price">Minimum price:</label>
<input type="text" name="min_price" id="min_price"><br>
<label for="max_price">Maximum price:</label>
<input type="text" name="max_price" id="max_price"><br>
<input id="Sbutton2" type="submit" name="submit" value="Search">
<button id="Sbutton3" onclick="window.location='add_equipment.php'">Add Equipment</button>
</form>
</div>
</div>
</body>
</html>
Here is the CSS when I am styling I like to change background of each div class so I can get a visual of what is happening as I change code.
.nav{
display: flex;
flex-direction: column;
margin: 10px;
margin-left: 15%;
margin-right: 15%;
padding-bottom: 20px;
background-color: rgb(77, 76, 76);
}
h2{
text-align: center;
font-size: 24px;
font-weight:bolder;
}
.navs {
width: 50%;
background-color: rgb(108, 109, 109);
height: 150px;
text-align: center;
margin-left: 25%;
margin-top: 20px;
padding-top: 10px;
}
#Sbutton{
font-size: 16px;
height: 150%;
width: 15%;
margin-left: 15%;
margin-top: 10px;
}
#Sbutton2{
font-size: 16px;
height: 150%;
width: 15%;
margin-left: 15%;
margin-top: 10px;
}
#Sbutton3{
font-size: 16px;
height: 150%;
width: 25%;
margin-top: 10px;
}
table{
border:3px solid gray;
border-collapse: collapse;
}
th{
border: 2px solid gray;
padding: 6px;
}
td{
border: 2px solid gray;
text-align: center;
}
Hope this helps.
Please have a look at the image and the code below. I am making simple signup html form. I am trying to keep in middle of the screen. also I just want to make div background opacity 50% but somehow, text input's and button's opacity is also changed to 50%.
Please help me to find a solution.
Here's a code of a simple signup form.
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgb(255,255,255); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
See Output of the code above
Please explain or answer deeply. Thanks in advance
just use this color code for the div if you want to make its opacity 50% only<div style="background-color: rgb(255,255,255,.5); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">and then you dont have to use the opacity for the div.
first give some width to your formform{width:600px;margin:auto; display:block; }it will makes your form in center.
to give margin from top and bottom give style like thisform{margin:150px auto;} so it will also give margin from top-bottom.
Try this your code will be run
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgba(255,255,255, .5); display: table; padding: 20px; border-radius: 25px; margin: 0px auto; text-align: center; top: 50%; left:50%; position: absolute; transform: translate(-50%, -50%)">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none; background: #fff;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
show code bellow:
body {
text-align: center;
}
form {
display: inline-block;
}
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgb(255,255,255,0.5);display: inline-table; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
I have prepared a snippet for you, using the display: table(-X) properties:
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<div style="display:table; height:calc(100vh - 50px); width:100%;"><!-- Change the "-50px" part to whatever size your navbar is -->
<div style="display:table-row;">
<div style="display: table-cell; vertical-align:middle; text-align:center;">
<form style="margin:auto;">
<div style="background-color: rgb(255,255,255); opacity: 0.5; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Hope this helps!
Hello i have a difficulty in setting up the width for the input radio button.
As you can see i'm using a ui-grid-b. the problem here is in the ui-block-c.. where in block-c i'm insert the control group for the radio button. I want to set the width for radio button for id 'full' is 60%, radio button id'half' is 20% and for the radio button id'one' is 20%.. which mean it total 100% that equal to the width for the ui-controlgroup-controls. i want to use the maximum width for the ui-controlgroup-controls with the different width for each radio button
<style>
.ui-grid-b>.ui-block-a {
width: 25%;
}
.ui-grid-b>.ui-block-b, .ui-grid-b>.ui-block-c {
width: 15%;
}
.ui-grid-b>.ui-block-c {
width: 60%;
}
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}
</style>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header" style="background-color:rgba(4, 165, 52, 0.86);">
<h1 align="center">
Header
</h1>
</div>
<div data-role="content" class="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<input type="text" value="Input"/>
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<input type="radio" name="full" id="full" value="" />
<label for="full" >Full</label>
<input type="radio" name="half" id="half" value="" />
<label for="radio-view-b" >Half</label>
<input type="radio" name="one" id="one" value="" />
<label for="one" >One</label>
</fieldset>
</div>
</div>
</div>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<h1 align="center"><i>Footer</i></h1>
</div>
</div>
I would like to hide the chekboxes in my from and replace them with pictures. At the moment i already have the pictures but i would also like to hide the check3boxes themself. if one of the pictures gets selected, it should get a highlighted border. I would be really glad for any help
here's my current form code
<form type="post" action="photoselection.php">
<div id="photowrapper">
<div class="photo">
<input type="checkbox" value="" name="bild1">
<label class="label_item" for="rbild1"><img src="bild1.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild2" id="rbild2">
<label class="label_item" for="rbild2"><img src="bild2.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild3" id="rbild3">
<label class="label_item" for="rbild3"><img src="bild3.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild4" id="rbild4">
<label class="label_item" for="rbild4"><img src="bild4.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild5" id="rbild5">
<label class="label_item" for="rbild5"><img src="bild5.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild6" id="rbild2">
<label class="label_item" for="rbild2"><img src="bild2.jpg"/></label>
<Input type = "Submit" Name = "Submit" VALUE = "Bild anzeigen">
</div>
</div>
</form>
You can do it using CSS
<style>
.photo > input{
display:none;
}
.photo > input:checked + label > img{
border: 3px solid black;
}
</style>
Hope it should work
As I said in my comment (and as #roullie mentioned), one way to do it is with jQuery / JS, a simple way to hide the checkboxes would be to do it like this:
jQuery example:
$(document).ready(function() {
$( ".checkbox" ).click(function() {
$( this ).hide();
});
});
And then apply the checkbox class to any of the checkboxes you want to hide when a image is shown.
This can also be used to show the checkbox again or add some other logic to be executed when the image is shown.
Use your image as background-image and with the help of a wrapper you can hide the checkbox completly. Works also with radio buttons (with a slight addition)
//HTML
<div class="checkbox">
<input id="check" value="" name="check" checked="checked" type="checkbox">
<label for="check"></label>
</div>
//CSS:
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox input[type="checkbox"] + label {
display: block;
float: left;
border: 1px solid grey;
width: 100px;
height: 50px;
background: transparent url("https://placehold.it/100x50/4DA61F") no-repeat scroll 0 0;
}
.checkbox input[type="checkbox"]:checked + label {
border: 1px solid darkred;
background: transparent url("https://placehold.it/100x50/F3C914") no-repeat scroll 0 0;
}
JSFiddle Example 1
Here a second solution with a inline image:
//HTML
<div class="checkbox">
<input id="check" value="" name="check" type="checkbox"/>
<label for="check">
<img src="https://placehold.it/100x50/deff00" alt=""/>
</label>
</div>
//CSS
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox input[type="checkbox"] + label {
display: block;
float: left;
font-size: 0;
border: 2px solid #f4f4f4;
}
.checkbox input[type="checkbox"]:checked + label {
border: 2px solid red;
}
JSFiddle Example 2
I have set when user types something in the search box, the suggestions will appear.
When suggestions appear, it will push the buttons and texts below down as I set its position relative.
But when user delete those words in the search box and the suggestion list disappears, the buttons and texts below the suggestion list did not move back to the original place.
How can I let the buttons and texts below the suggestion list move back to the original place when user delete those words in search box?
This is my current code:
<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: transparent;
z-index: 10;
}
.suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 10px;
}
.suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
</head>
<body>
<form method="GET" action="search.php" name="q">
<table align="center">
<div>
<h1><center>Brandon's Search Engine</center></h1>
</div>
<div align="center">
<input type="text" name="q" id="q" class="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
onkeyup="getSuggestion(this.value)" autocomplete="off" autoFill="on" onblur="closeBox()"/>
<script>document.getElementById('q').focus()</script>
<div id="suggestionBox" style="visibility: collapse;">
<div id="suggestion" style="width: 645px; text-align: left; padding: 2px;">
</div>
</div>
</div>
<br />
<div align="center">
<input type="submit" value="Search" name="submit" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
</div>
<div align="center">
Can't find your site? <br /> Insert here.
</div>
</table>
<input type="hidden" name="page" value="1" />
</form>
</body>
</html>
Thanks in advance.
On your function in your onkeyup, you can check the text value and if that was empty change css position of your element to original:
function getSuggestion(value){
if(!value.length()){
//change to original place
}
.
.
.
}
I hope to help