I have written this html:
Add Comment
<div id="addcomment">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>
What I want is when I click the "Add comment" then form should be displayed in place of "Add comment" just like on "stackoverflow". How can I make this happen??
Here's a quick and dirty proof, optimize from here:
CSS:
#addcomment {
display : none;
}
.addcomment:active {
display : none;
}
.addcomment:active + #addcomment {
display : block;
position : absolute;
top : 5px;
}
http://jsfiddle.net/7uax74qd/
Use javascript for it...
Add Comment
<div id="addcomment" style="display:none;">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>
THEN IN JAVASCRIPT write a function and call that in anchor tag..
function show()
{
document.getElementById('add').style.display='none';
document.getElementByid('addcomment').style.display='block';
}
Related
I've made 2 input type="text". And I want to color the texts on them in different colors. Only in css file.(Not in html file.) How can I color them?
HTML
<form class="js-form form">
<input type="text" name="write_name" placeholder="What is your name?" />
</form>
<form class="js-toDoForm">
<input type="text" name="write_todo" placeholder="Write a to do" />
</form>
you can simply add a class name like this:
<form class="js-form form">
<input class="firstinput" type="text" name="write_name" placeholder="What is your name?" />
</form>
<form class="js-toDoForm">
<input class="secondinput" type="text" name="write_todo" placeholder="Write a to do" />
</form>
and the css like this:
.firstinput {
//write your styles
}
.secondinput {
//write your styles
}
Hope it helped you:) IG: #lindenkoppejan
simply make new style for example like this
.text-red {
color: red;
}
.text-blue {
color: blue;
}
after that, use the class where you want to use the color like this
<form class="js-form form">
<input type="text" class="text-red" name="write_name" placeholder="What is your name?" />
</form>
<form class="js-toDoForm">
<input type="text" class="text-blue" name="write_todo" placeholder="Write a to do" />
</form>
.js-form input {
//write your styles
}
.js-toDoForm input {
//write your styles
}
<!-- OR -->
<form class="js-form form"><input class="input_one" type="text" name="write_name" placeholder="What is your name?" /></form>
<form class="js-toDoForm"><input class="input_two" type="text" name="write_todo" placeholder="Write a to do" /></form>
<!-- And write your styles -->
.input_one {
//write your styles
color: red;
}
.input_two {
//write your styles
color: blue;
}
I have 2 forms, one of which is to submit the user data ( 1st form ) and another to upload a file ( 2nd form. I cannot make it as a single form. My design is that way). First I want user to enter the basic information and then before hitting the submit button, I want that user to upload image and then hit the submit button. How can I make submit button of the 1st form to come after the 2nd form.
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" style="position:relative; top:120px; left:90%;" value="submit"> <!-- This button should come after 2nd form upload button -->
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
I have used CSS it changed the position though but I encountered my vertical scroll bar cut to half, making bottom half totally invisible.
If you add a wrapper, you can better control its position using the wrappers boundaries and absolute positioning.
1) Below
The wrapper's padding-bottom: 25px is for the absolute positioned input to not overlap any elements that comes after the forms
.formswrapper {
position: relative;
padding-bottom: 25px;
/* style for this demo only */
border: 1px solid lightgray;
}
.formswrapper form:first-child input:last-child {
position: absolute;
left: 0;
top: 100%;
transform: translateY(-100%);
}
<div class="formswrapper">
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" value="submit">
</form>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
</div>
2) Beside
.formswrapper {
position: relative;
}
.formswrapper form:first-child input:last-child {
position: absolute;
left: 60px;
top: 100%;
transform: translateY(-100%);
}
<div class="formswrapper">
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
</div>
If you can use jQuery, I would do the following:
CSS:
#button1 { display:none; }
jQuery:
$(document).on("click", "#button2", function() {
$("#button1").css("display", "inline-block");
)}
This one should work:
$('#userData').bind('keyup change', function(){
var show = true;
for(child in $(this).children){
if(child.is(':empty')){
show = false; //Could break here if you want.
}
}
if(show){
$('#upload').show();
} else {
$('#upload').hide();
}
});
#upload{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userData" action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" style="position:relative; top:120px; left:90%;" value="submit">
</form>
<form id="upload" action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
I tried making a chat service, and it worked but now im with a problem.
I want to align these two form elements, so they are on one line. So the the 'send' button gets moved a little higher so it is in place.
I tried this:
position: relative;
I added that to the css. But no result.
I don't know how to solve this problem. Since im not an css genuis.
code:
html:
<p> </p>
<div id="chattextarea" id="postform">
<form action="" method="POST">
<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')" placeholder="Enter an chat message here...">Enter an chat message here...</textarea>
<input type="hidden" name="chatid" value="<?php echo $chatid ?>">
<input type="submit" value="Send" id="chatmessagesend">
</form>
</div>
</div>
css:
#postform {
position: relative;
}
Picture:
Thansk in advance
try using:
#chattextarea{
vertical-align: top;
}
You are missing an opening div. Also, this will work:
<p> </p><div>
<div id="chattextarea" id="postform">
<form action="" method="POST">
<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')" placeholder="Enter an chat message here...">Enter an chat message here...
</textarea>
<input type="hidden" name="chatid" value="<?php echo $chatid ?>">
<input type="submit" value="Send" id="chatmessagesend">
</form>
</div>
</div>
* { margin:0;padding:0; }
#postform {
position: relative;
}
form > #chatmessagesend { vertical-align: top; }
I have made this simple search box and want to use an svg image as the submit button, how could I do that without any javascript?
here's the form:
<form method="post" action="#">
<input type="text" name="rechercher" id="rechercher" placeholder="Rechercher"/>
<input type="submit" value="none" onerror="this.onerror=null; this.src='images/loupe.png'"/>
</form>
You can use an image button on the button
<input type=image src=PATH_TO_YOUR_IMAGE alt="Submit Me">
or set submit button background to an image using css
input[type=submit] {
background:url(BACKGROUND_IMAGE_PATH_HERE);
border:0;
display:block;
height:Change_TO_backgroundimageheight;
width: Change_To_backgroundimageWidth;
}
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit">
</form>
The long and short is input type image will also submit the form
Hy,
This are my HTML Code:
<h2>Advertising over Push Notifications</h2>
<h3>Login</h3>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">
E-Mail: <input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb" ></br>
Passwort: <input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb" ></br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
and i want that the text "Benutzername...." will be shown in the red area, i don't want a new wordwrap.
i want this:
<h3> elements have margins by default. Add CSS to remove it:
h3{
margin: 0;
}
You could insert a id into h3 and add CSS to remove it. Note: if you modify the tag h3 without an id or class, all h3 tags in your code will be modified.
HTML
<h3 id="login">Login</h3>
CSS
h3#login{
margin-bottom: 0;
}
Demo
HTML
<h2>Advertising over Push Notifications</h2>
<h3 class="login">Login</h3>
<span>Benutzername....</span>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">E-Mail:
<input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb">
</br>Passwort:
<input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb">
</br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
css
.login {
margin: 0;
}
Add additional div in html like this: DEMO
HTML
<div class="error">
<label for="infoLabel_CheckUserLoginWeb"></label>
</div>
then define a rule in css:
CSS
.error { float:left; height:20px; width: 100%;}
.login {margin:0;}