Can someone help to change this to incorporate an image called BUTTON1.JPG instead of the standard submit button?
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<div class="style7">
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</div>
</form>
Use an image type input:
<input type="image" src="/Button1.jpg" border="0" alt="Submit" />
The full HTML:
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<div class="style7">
<input type='text' id='userInput' name='userInput' value=''>
<input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />
</div>
</form>
Why not:
<button type="submit">
<img src="mybutton.jpg" />
</button>
Use CSS :
input[type=submit] {
background:url("BUTTON1.jpg");
}
For HTML :
<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">
Just remove the border and add a background image in css
Example:
$("#form").on('submit', function() {
alert($("#submit-icon").val());
});
#submit-icon {
background-image: url("https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455__340.jpg"); /* Change url to wanted image */
background-size: cover;
border: none;
width: 32px;
height: 32px;
cursor: pointer;
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="submit" id="submit-icon" value="test">
</form>
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<div class="style7">
<input type='text' id='userInput' name='userInput' value=''>
<img src="BUTTON1.JPG" onclick="document.forms['formName'].submit();">
</div>
</form>
HTML:
<button type="submit" name="submit" class="button">
<img src="images/free.png" />
</button>
CSS:
.button { }
Related
I want to align this:
HTML view
to this but on the center of website:
Desired result
but It goes to left margin instead:
The reality
How can I make this one to be on the center of website?
I have tried using some combinations and different attributes but the result did not change.
.container{
text-align: center;
position:relative;
}
.inputArea{
margin: auto;
display: flow;
}
.deleteArea{
margin:auto;
display:inline-block;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
What should I change in my code to achieve the desired result?
Do you intend to achieve something like this? One option could be to use css grid...
.container{
text-align: center;
position: relative;
}
.inputArea form {
margin: auto;
display: inline-grid;
grid-template-columns: auto auto auto minmax(0px, 100px);
text-align: left;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<div><input type="submit" th:id="addWord" value="add" /></div>
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<div><input type="submit" th:id="deleteWord" value="delete" /></div>
</form>
</div>
</div>
Here is another way to do it. Have you tried this?
.container {
width: 100%;
}
.container-inner {
margin: 0 auto;
display: table;
}
<div class="container">
<div class="container-inner">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
</div>
I want to avoid line break between the buttons login and Register,So that the two buttons come in the same line
<h1>Are You ready to take the quiz</h1>
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
You can use css for that.
form {
display: inline-block;
}
In order to prevent every form element you're using to get inlined, I'd attatch a class to those which you want to inline.
<form class="inline" action="link1">
<input type="submit" value="Login" />
</form>
<form class="inline" action="link2">
<input type="submit" value="Register" />
</form>
form.inline {
display: inline-block;
}
Demo
Here a solution, I used a container : sameLine so evrithing is in that div will be on the same line
.sameLine{white-space: nowrap;}
.sameLine * {
display: inline;
}
<h1>Are You ready to take the quiz</h1>
<div class="sameLine">
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
</div>
I am trying to put my CSS code in the same file as my HTML code, but it does not display properly (I do not want to just link my CSS to my HTML, I already got that to work). I have tried copying and pasting the code, but that does not work. Do I have to do it differently when it is in the same file?
Here is the relevant code:
<head>
<title> Example </title>
<style type="text/css">
input: textarea{
resize: none;
}
input[type=button]{//set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id = "mainForm" name="mainForm" method="get" action="" onsubmit=" return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1"> </input>
<input type="button" value="2" id="button2"> </input>
<input type="button" value="3" id="button3"> </input>
<input type="submit" id="submit" name="submit" class="btn" value="Submit" />
<input type="reset" id="reset" name="reset" class="btn" value="Clear" />
</form>
</body>
Here is a pic of how it looks when I link it
And here is a pic of how it looks when I try putting the CSS in the HTLM file
no need to specify input just textarea . you can even use inline css for textarea.
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{
width: 5em; height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
Works for me. Only problem I see is input: textarea is invalid. Just use textarea instead.
<head>
<title> Example </title>
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{ //set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id="mainForm" name="mainForm" method="get" action="" onsubmit="return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1">
<input type="button" value="2" id="button2">
<input type="button" value="3" id="button3">
<input type="submit" id="submit" name="submit" class="btn" value="Submit">
<input type="reset" id="reset" name="reset" class="btn" value="Clear">
</form>
</body>
i want to fix the header so it will be there even if i scrolled down
i tried to use position:fixed
<header style="margin-bottom: 1cm; position: fixed; ">
<div style="float:left;" align="left">Instagram User Explorer</div>
<div align="center">
<form name="contact" id="contact" method="get">
Search : <input type="text" name="keyword" id="keyword"/>
<input type="button" value="search!" name="submit" id="submit"/>
</form>
</div>
</header>
but the textfield and button wnt down i dont know why
and what i want is to be in the same line
<header style="margin-bottom: 1cm;">
<div style="float:left;" align="left">Instagram User Explorer</div>
<div align="center">
<form name="contact" id="contact" method="get">
Search : <input type="text" name="keyword" id="keyword"/>
<input type="button" value="search!" name="submit" id="submit"/>
</form>
</div>
</header>
like this :
how to do it ?
Fiddle is here
you need to do a little more work with css to get that effect, the background is just added for visibility in the fiddle. your body needs a margin that can clear the fixed header as well, as seen in .body class below
.header {
height: 50px;
position:fixed;
width: 100%;
background: #ddd;
top: 0;
}
.body {
margin-top: 70px;
}
<header style="margin-bottom: 1cm;">
<div style="float:left;">Instagram User Explorer</div>
<div style="float:right;">
<form name="contact" id="contact" method="get">
Search : <input type="text" name="keyword" id="keyword"/>
<input type="button" value="search!" name="submit" id="submit"/>
</form>
</div>
</header>
I have 2 divs.
First one is a datepicker div and below it i have a graph.when i try to pick a date, datepicker does not work because of overlapping of these 2 divs. I want to suppress datepicker over graph div.
//here is image
http://tinypic.com/r/1549hlz/8
<div id="cal" name="cal" align="center" style="align: center; float: center; padding- right: 150px;" >
<form name="form" method="post">
<span >From</span> <input type="text" name="date_from" id="date_from" onclick="setSens('date_to', 'max');" readonly="true">
<span >Till</span> <input type="text" name="date_to" id="date_to" onclick="setSens('date_from', 'min');" readonly="true">
<input name="submit" onclick="show6(); update6();" type="submit" id="submit" value="Akım"> <input name="submit" onclick="show6(); update8();" type="submit" id="submit" value="Güç">
</form>
</div>
<div id="graph3" name="graph3" align="center" style="display:none;width:1000px;height: 250px;">Akım-Zaman Grafiği</div><br/><br/><br/>
<script type="text/javascript">
function update6(){
graph drawing.....
}
</script>
<script type="text/javascript">
function update8(){
another graph drawing..... (not important for the case)
}
</script>
<script>
function show6(){
document.getElementById("graph3").style.display = 'block';
document.getElementById("cal").style.display = 'block';
}
</script>
You have not cleared your float.
Put this between both DIV's
<div id="clear" style="clear:both;"></div>
So ...
<div id="cal" name="cal" align="center" style="align: center; float: center; padding- right: 150px;" >
<form name="form" method="post">
<span >From</span> <input type="text" name="date_from" id="date_from" onclick="setSens('date_to', 'max');" readonly="true">
<span >Till</span> <input type="text" name="date_to" id="date_to" onclick="setSens('date_from', 'min');" readonly="true">
<input name="submit" onclick="show6(); update6();" type="submit" id="submit" value="Akım"> <input name="submit" onclick="show6(); update8();" type="submit" id="submit" value="Güç">
</form>
<div id="clear" style="clear:both;"></div>
</div>
<div id="graph3" name="graph3" align="center" style="display:none;width:1000px;height: 250px;">Akım-Zaman Grafiği</div>
<br/><br/><br/>
p.s. No need to state type="text/javascript" is fine. You only need one set of tags for all three scripts.
'<script>
function update6(){
graph drawing.....
}
function update8(){
another graph drawing..... (not important for the case)
}
function show6(){
document.getElementById("graph3").style.display = 'block';
document.getElementById("cal").style.display = 'block';
}
</script>'