I wanna have 3 clickable icons in textbox
can someone support me with this
I found this code for a single clickable icon
I tried more icons in it but is not working
#form1 div {
position: relative;
width: 400px;
padding: 5px;
border: 1px solid #000;
overflow: hidden
}
#form1 label {
float: left;
text-align: right;
width: 80px;
padding: 0 20px;
}
#form1 input {
width: 200px;
padding: 5px 40px 5px 5px;
float: left;
}
#form1 a {
float: left;
margin: 2px 0 0 -32px;
text-decoration: none;
width: 30px;
height: 25px;
background: transparant;
position: relative;
z-index: 99;
}
<form id="form1" method="post" action="">
<div>
<label for="text">Enter text:</label>
<input type="text" name="text" id="text" />
<a href="http://www.pmob.co.uk"><img src="/user/icos/6.gif" border="none">
</a>
</div>
</form>
How about this???
sample screenshot
<form id="form1" method="post" action="">
<div>
<label for="text">Enter text:</label>
<input type="text" name="text" id="text" />
<a href="http://www.url.com"><img src="/folder/img/name.png" height="20" width="20">
</a>
</div>
<input type="submit" value="submit"/>
</form>
You can expand from here, take a look at the picture.... if thats what you want
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.
Hello im trying to make a form that uploads a video file with images, tags and video name (vn stands for video name). which would upload all of this with a press of a button with post. while this worked in the past currently it isnt working and instead stops without uploading the data through post, however when i present the form with empty inputs it decides to go through with the post but then gets caught with the check if the forms are filled.
below is the code
<form method="post" action="" enctype="multipart/form-data">
<div class="btn">
<label>
Choose Your Video <input type="file" id="file" name="file" hidden="">
</label><br><br><br><br></div>
<div class="btn1">
<label>
Choose Your cover image <input type="file" id="images" name="image" hidden="">
</label></div>
<input type="text" placeholder="tags" onclick="" name="tags" id="tags" class="textbox">
<input type="text" placeholder="video name" name="vn" class="textbox1">
<div class="ca">
<label>
upload <input type="submit" name="submit2345" hidden="">
</div></label>
</form>
php (not all of it just the bits you need, im not showing all of it because it spreads across many lines). The check for the video file is lower and i haven't implemented a cover image yet because of this problem
<?php
if(isset($_POST["submit2345"]))
{
header1("eee");
If(rtrim($_POST['tags'])!="#" && rtrim($_POST['vn']!= "" )){
css if it matters
#vupb{
background-color: white;
box-shadow: 2px 4px 10px rgb(0 0 0 / 40%), 8px 2px 16px rgb(0 0 0 / 40%);
border-radius: 20px;
padding-top: 30vh;
width: 30vw;
margin-left: 30vw;
margin-top: 2vh;
padding-bottom: 10vh;
}
.ca{
width: 20vw;
overflow-x: hidden;
overflow-x: hidden;
border-radius: 5px;
border: 0px solid lightgrey;
background-color: limegreen;
color:white;
font-weight: 1000;
font-size: large;
margin-left: 5vw;
margin-top: 5vh;
padding-top: 2vh;
padding-bottom: 2vh;
}
.ca:hover{
background-color: #2bb32b;
color: lavender;
cursor: pointer;
}
.login input[type=file]{
display:none;
}
.btn{
width: 7vw;
height: 5vh;
padding-top: 1vh;
padding-bottom: 1vh;
border-radius: 5px;
border: 0px solid black;
background-color: #1877f2;
color:white;
font-weight: 1000;
font-size:medium;
margin-left: 18vw;
margin-top: -33.5vh;
}
.btn:hover{
background-color: #186edf;
color: lavender;
cursor: pointer;
}
.vfi {
border: 1px solid black;
width: 12vw;
height: 14vh;
overflow-x: hidden;
overflow-x: hidden;
text-align: center;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 5vw;
margin-top: -20vh;
font-weight: bold;
z-index: 90;
}
.textbox {
width: 20vw;
height: 7vh;
font-size: medium;
border-radius: 5px;
border: 1px solid lightgrey;
margin-top: 15vh;
}
.textbox1 {
width: 20vw;
height: 7vh;
font-size: medium;
border-radius: 5px;
border: 1px solid lightgrey;
margin-top: 2vh;
}
.btn1{
width: 7vw;
height: 5vh;
padding-top: 1vh;
padding-bottom: 1vh;
border-radius: 5px;
border: 0px solid black;
background-color: #1877f2;
color:white;
font-weight: 1000;
font-size:medium;
margin-left: 18vw;
margin-top: 12.5vh;
}
.btn1:hover{
background-color: #186edf;
color: lavender;
cursor: pointer;
}
.vfi1 {
border: 1px solid black;
width: 12vw;
height: 14vh;
overflow-x: hidden;
overflow-x: hidden;
text-align: center;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 5vw;
margin-top: 5vh;
font-weight: bold;
z-index: 91;
}
Your HTML isn't valid. Most likely your POST isn't working because there are several syntax errors. Try again by using valid HTML like this
<form method="post" action="" enctype="multipart/form-data">
<div class="btn">
<label>
Choose Your Video
<input type="file" id="file" name="file" hidden=""/>
</label>
<br/>
<br/>
<br/>
<br/>
</div>
<div class="btn1">
<label>
Choose Your cover image
<input type="file" id="images" name="image" hidden=""/>
</label>
</div>
<input type="text" placeholder="tags" onclick="" name="tags" id="tags" class="textbox"/>
<input type="text" placeholder="video name" name="vn" class="textbox1"/>
<div class="ca">
<label>
upload
<input type="submit" name="submit2345" hidden=""/>
</label>
</div>
</form>
I was trying to insert blob in table obook I have coded this file for that purpose when this page is executed all works fine all the data update in the table obook except the blob containing column IMAGE there I get [blob-0byte]. Is there any syntax problem or the method Im using is wrong?
<?php
session_start();
$id=$_SESSION['eid'];
include("config.php");
if(isset($_REQUEST['send']))
{
$bn=$_REQUEST['bookname'];
$pr=$_REQUEST['author'];
$au=$_REQUEST['publisher'];
$k=$_REQUEST['price'];
$image = addslashes(file_get_contents($_FILES['photo']['tmp_name']));
if(mysql_query("INSERT INTO obook(BOOKNAME,AUTHOR,PUBLISHER,PRICE,SELLER,IMAGE) VALUES('$bn','$pr','$au','$k','$id','$image')"))
{
header("location:outofstock.html");
}
else
{
header("location:index.php");
}
}
?>
<head>
<title>POSTADD</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:50px auto;
font-family: 'Raleway', sans-serif;
}
h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
#login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: 70px;
}
input[type=text],input[type=email]{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 100%;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: -12px;
}
#formget{
float:right;
}
h1 {
margin-left: -85px;
}
</style>
<style>
table{
border-spacing:15px;
}
td{
padding:30px;
}
body
{
background-image: url(back.jpg);
background-position:0px 0px;
background-attachment:fixed;
background-size: cover;
background-repeat: repeat;
}
</style>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff3333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ff8080;
}
</style>
<style>
.center {
margin: auto;
width: 60%;
padding: 100px;
}
</style>
</head>
</head>
<body>
<div class="center">
<ul>
<li><a class="active" href="index.php">NewBooks</a></li>
<li>OldBooks</li>
<li>Rent a book</li>
<li>Feedback</li>
<li>MyProfile</li>
</ul>
</div>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="main">
<div id="login">
<h2>Old books</h2>
<hr/>
<form name="f1" onSubmit="return vali() method="post">
<label>Book Name :</label>
<input type="text" name="bookname" id="bookname" required="required" placeholder="Please Enter Book Name"/><br /><br />
<label>Author Name :</label>
<input type="text" name="author" id="author" required="required" placeholder="Please Enter Name of the Author"/><br/><br />
<label>Publication Name :</label>
<input type="text" name="publisher" id="publisher" required="required" placeholder="Please Enter Name of Puclications"/><br/><br />
<label>Price :</label>
<input type="text" name="price" id="price" required="required" placeholder="Please Price of the book"/><br/><br />
<label>Image :</label>
<input name="photo" type="file" id="photo" /><br/><br />
<input type="submit" value=" send " name="send"/><br />
</form>
</div>
<!-- Right side div -->
</div>
</body>
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
I have a PHP page that contained the following HTML elements.
<div id="templatemo_banner" onClick="parent.location='../index.php'">
<div id="logo"></div>
</div>
<div id="templatemo_menu_search">
<div id="templatemo_menu">
<?php include("../template/menu.php"); ?>
</div> <!-- end of menu -->
<div id="search_section">
<form action="#" method="get">
<input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
</form>
</div>
<div class="cleaner"></div>
</div>
In the respective CSS file:
#templatemo_banner {
width: 960px;
height: 288px;
margin: 0 auto;
background: url(images/templatemo_banner_bg.jpg) no-repeat;
border-bottom: 5px solid #cfd389;
}
#templatemo_banner #logo {
float: left;
margin: 100px 0 0 80px;
width: 673px;
height: 128px;
background: url(images/templatemo_logo.jpg) no-repeat;
}
#templatemo_menu_search {
clear: both;
width: 960px;
height: 50px;
background: url(images/templatemo_menu_bg.jpg) no-repeat;
}
#templatemo_menu {
float: left;
width: 650px;
height: 50px;
}
#templatemo_menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#templatemo_menu ul li {
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
padding: 0 30px;
height: 35px;
padding-top: 18px;
text-align: center;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #333333;
font-weight: bold;
outline: none;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #ffffff;
background: url(images/templatemo_menu_hover.jpg) no-repeat;
}
I face this problem where the aforementioned html elements repeated itself once after I perform the form submission. You can picture it as if after I have my banner and menu there is an extra banner and menu below the original set. Anyway the extra elements disappear after I refresh the page.
I will appreciate any advise. I run this code in XAMPP 1.7.7 using Google Chrome as my browser.
Remove the hash in the action...
<form action="" method="get">