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>
Related
I have a problem applying CSS to <form> element and all nested elements inside. I do it by class .header_navbar_form and .header_navbar_form_input in stylesheet header.css, but only bootstrap takes effect. For some reason, other elements, such as <div>, <p>, <h1> are affected by the same stylesheet
Once again: div with id header_navbar_div is affected by the same stylesheet
cshtml:
<div id="header_navbar_div">
<form class="header_navbar_form" action="/Home/Index">
<input class="header_navbar_form_input" type="submit" value="Uvod">
</form>
<form class="header_navbar_form" action="/Home/Locations">
<input class="header_navbar_form_input" type="submit" value="Lokality">
</form>
<form class="header_navbar_form" action="/Home/Trips">
<input class="header_navbar_form_input" type="submit" value="Nase vandry">
</form>
<form class="header_navbar_form" action="/Home/Equipment">
<input class="header_navbar_form_input" type="submit" value="Vybava">
</form>
<form class="header_navbar_form" action="/Home/Recipes">
<input class="header_navbar_form_input" type="submit" value="Kucharka">
</form>
<form class="header_navbar_form" action="/Home/Tips">
<input class="header_navbar_form_input" type="submit" value="Navody a rady">
</form>
<form class="header_navbar_form" action="/Home/Nature">
<input class="header_navbar_form_input" type="submit" value="O Prirode">
</form>
<form class="header_navbar_form" action="/Home/Songbook">
<input class="header_navbar_form_input" type="submit" value="Zpevnik">
</form>
<form class="header_navbar_form" action="/Home/Partners">
<input class="header_navbar_form_input" type="submit" value="Partneri">
</form>
</div>
CSS:
#header_navbar_div {
padding-top: 2px;
display: flex;
justify-content: center;
}
.header_navbar_form {
width: 50%;
background-color: red;
}
.header_navbar_form_input {
width: 11%;
padding-bottom: 10px;
padding-top: 10px;
border-color: darkolivegreen;
background-color: lightgoldenrodyellow;
color: darkolivegreen;
font-weight: bold;
}
I openned the application in Edge instead of Firefox and the CSS took effect, so i cleared a cache of Mozzila and it works. Kind of noobie but, solved the problem. Thanks for efforts.
Jackob
I am have the following form:
<form>
<input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City">
<input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>
and the following css:
#search_bar, #search_bar_submit_button{
height: 5em;
}
The search bar is now 5em but the submit button's height has not changed. I have seen answers that suggest using <input type="submit" height = "x">, but feel there has to be a way to do this with CSS?
input[type=submit] {
font-size: 5em;
}
<input type="submit" value="Submit">
Please replace <input type='submit' with <button type='submit'.
This will also allow you to apply proper CSS. Please see example below.
input[type='submit'] {
height: 5em;
}
button[type='submit'] {
height: 5em;
}
<input type='submit' value='Search'/>
<button type='submit'>Search</button>
Please go through following link for more details on it.
input type="submit" Vs button tag are they interchangeable?.
This may help CSS
#search_bar_submit_button{
max-height: 50px;
}
You can try below code.
#search_bar_submit_button {
width: 10em;
height: 4em;
}
<form>
<input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City"><br/><br/>
<input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>
I have this code:
.hidden_element {
height: 1px;
width: 1px;
overflow: hidden;
}
<form action="">
<label for="file">
<button type="button" class="button red">Choose File</button>
</label>
<div class="hidden_element">
<input type="file" name="video" id="file" />
</div>
</form>
The problem is when I click choose file nothing happens.
Change your button like <button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>
.hidden_element {
height: 1px;
width: 1px;
overflow: hidden;
}
<form action="">
<label for="file">
<button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>
</label>
<div class="hidden_element">
<input type="file" name="video" id="file" />
</div>
</form>
The label element applies to one input only: since it has one as a child (the button is an input element), it applies to it instead of the file-input as you hoped.
Just remove the button, maybe replace it with a span and style it as you wish, and clicking the label will open the file picker. No javascript needed! :)
.hidden_element {
height: 1px;
width: 1px;
overflow: hidden;
}
.button {
display: inline-block;
box-sizing: border-box;
border: 1px solid #aaa;
background-image: linear-gradient(to bottom, #eee, #ccc);
padding: 0.1em 0.2em;
cursor: pointer;
}
<form action="">
<label for="file">
<span class="button red">Choose File</span>
</label>
<div class="hidden_element">
<input type="file" name="video" id="file" />
</div>
</form>
I do not see the purpose of putting the button as a label. Either use a button or a submit to process your input (file upload). You should not hide your 'input file' tag. You really need two things for the user: the 'input file' tag to allow the user to choose the file he wants to upload and then a way to perform an action by submitting the form or perhaps an ajax call. However, since you are just learning this process, I recommend, just performing a simple submit and for you to write the code on the backend that will handle uploading the file. Here is a sample of my html code:
<form method="post" action="uploadFile.php">
<input type="file" name="video" id="file" />
<br /><br />
<input type="submit" value="upload file">
</form>
So I have a problem with that the "submit" box doesent show right under the "Password-input". So I wondered if you could help me. Thanks for any answers. Im not a professional programmer so keep that in mind.
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<input type="submit" id="Submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Okey its very simple
<label> </label>
<input type="submit" id="Submit" value="Submit">
make an empty label for submit button
Just add 'br' tag which is nothing but new line. Here is the code
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<br>
<br>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<br>
<br>
<input type="submit" id="Submit" value="Submit">
<br>
<br>
</fieldset>
</form>
</body>
</html>
hope this helps for u!!
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 { }