i have html input when enter number and press enter it will change the image size
<input type="text" size="2" id="change-width">
now i want to turn the input into button or a icon when press it will change the image size like input did.the function is with the id name but i dont want to change stuff there.
is there anyway i could do this by only html and wont touch any js ?
i already tried
<button type="submit" value="25" id="change-width">A4 size</button>
Related
How would I go about making a font-awesome icon like the faCamera accept fileUpload, basically make the font awesome icon into an input div with type file. Ive placeholder on the input div but it doesnt really work.
What I have
<input placeHolder={faImage} type='file' accept="image/*" onChange={handleFileSelect}</input>
<FontAwesomeIcon type="file" icon={faImage}></FontAwesomeIcon>
There is an input tag which gets some text and a button to submit the information. I want to make sure the user clicks button. This is not related to validating the input. Just want to make sure that if the user is viewing this page and has entered text then he must click the button before moving onto the next page.
<input type="text" class="form-control ng-pristine ng-valid ng-touched" placeholder="Search for a domain" name="page1.domainSearch" [(ngModel)]="searchValue" (ngModelChange)="func()" />
<button type="submit" class="search" (click)="func()" [disabled]="!searchValue"></button>
I know i can add a boolean variable to this component and then pass the value of this variable to the component having the button to progress to next page as an input. But is there any way to make sure of this in the same component?
I'm trying to swap out all my default submit buttons to image submit buttons. However, when I do this it still functions fine but there seems to be not text over the image like the value="Login" on the default button so my I was trying alt="Login" but it simply wasn't appearing. Anyone know why this is?
<form method="post" action="index.php">
<div id="userNameLoginDiv">
<p>Username:</p>
<input type="text" name="username" size="12">
</div>
<div id="userPasswordLoginDiv">
<p>Password:</p>
<input type="password" name="password" size="12">
</div>
<div id="loginBtnDiv">
<input type="image" src="IMAGES/button.png" alt="Login">
</div>
</form>
Because image inputs are server side image maps. They are designed to let the user pick a point on the image and send its coordinates to the server. The image itself is the information to be shown to the user, not some text.
The alt text is only shown if the image cannot be (e.g. if the URL to it is a 404 error or if the visitor makes use of screen reader software).
If you want a background image on a submit button, then use a submit button and set the background-image CSS property. (You may also want to set border, padding, et al).
I am styling a form with an input field. The input field is required to be completely transparent. The input field itself is no problem but once I start typing, the browser opens up the dropdown with the saved form data, displaying the words I previously entered in input fields. The dropdown itself is not transparent but is white. When I hover over one of the saved words it appears in the input field and when it does, the input field is also given the white background.
I tried setting the background for the active, focus and hover state to transparent but that doesn't seem to do the trick. I am also not able to see the saved form data dropdown in the element inspector so I don't know how to target it.
HTML:
<form class="" action="" method="_GET" accept-charset="utf-8" role="]">
<div class="form-group">
<label class="sr-only" for="q">Search Input Field</label>
<input class="form-control" type="text" name="q" value="" placeholder="SEARCH">
</div>
<button type="submit" class="btn btn-default btn-red">SEARCH</button>
</form>
Here's a fiddle:
http://jsfiddle.net/dtxeofnL/
Click into the input field and type a letter. If you have previously entered something in the input field (or another input field in your browser), the dropdown will appear. When you hover over one of the words in the dropdown, it'll appear in the input field and give it an opaque, white background.
Can this be done?
Autocomplete is browser and operating system specific. There doesn't appear to be any way to style the browser's own internal autocomplete function.
I would suggest disabling browser autocomplete altogether:
<input autocomplete="off">
Then utilizing JqueryUI's Autocomplete function, http://jqueryui.com/autocomplete/, which can be styled any which way you'd like.
I have single file upload feature on my site.
To improve CSS I have added two buttons on my html. one with input type as file and another as button. Input type file is hidden by setting opacity 0 and input type button on top. When I clicked on button I have setup onclick event which triggers the click event of browse button which popup image uploader.
When I selects image and submit the form I don't get any details of file in my $_POST.
Why I am doing this, because input type file comes with one text box and a button to its right corner. To open a popup user can single click on button or double click on text box. I want to avoid double clicking.
Any better solution will be appreciated.
Thanks!!
We can click even if an input got opacity 0 !
In your html:
<input type="file" style="visibility:hidden;" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />
js:
$(function(){
$('#clickme').click(function(){
$('#uploadme').click();
});
});
Now you can stylize your button how you will!