Creating an image button within a form using Twitter Bootstrap

My current situation involves having images like this:

    <img src="image1.jpg"  width="80" height="80" id = "wp" alt="workplace">
 <img src = "image2.jpg"  width="80" id = "tm" height="80" alt="team">

and then writing the onclick event for them:

$('img#wp').click(function() {


});

The issue I'm facing is that I can't use this method to insert a value into a form based on which image is clicked. Additionally, the images don't function like buttons, making them less mobile and tablet-friendly. How should I approach solving these problems?

htmlcsstwitter-bootstrap

Answer №1

Submitting forms can be done using the <button> element, which allows for an image tag to be included.

<button name="submitButton" value="clickMe" type="submit">
   <img src="image.jpg" alt="" />
</button>

Answer №2

If you want to add a creative touch, consider utilizing an image as a submit button

<input type="image" src="http://www.example.com/images/submit-button.jpg" alt="Submit Form" class="btn"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Align Bootstrap Icons in the Center Horizontally

I'm struggling to center Bootstrap Icons within my buttons. The icon appears to be off-center horizontally, and I've tried various methods like text-align and flexbox with justify-content. It seems like the "letter" itself is causing some extra s ...

htmlcssbootstrap-4icons

When printing a PDF, a div that is set to 100vh only takes up

After setting the div to be 100vh, I realized that when printing it only takes up half of the page. Adding media print did not make a difference, and even trying to set the height to 100% instead didn't work for PDFs. html, body { height: 100%; ...

htmlcsspdf

The function view() is not displaying the CSS and JS files properly

Having trouble with loading the css and js on my view: This is how I set up the controller: return view('home.news') ->with("news", $news); And here's how the route is defined: Route::get('/news/{id}&apos ...

javascriptphphtmlcsslaravel

The method for organizing boxes on the stack exchange website's list page

I can't help but wonder about a unique and innovative feature on this stackexchange page that showcases all the stackexchange sites in a grid layout. Upon clicking on a site box, it expands in size while the surrounding boxes adjust their positions t ...

javascriptalgorithmhtmlstackexchange

Accessing the clandestine div via direct hyperlink

I have incorporated a toggle plugin from this website to display hidden divs. Each hidden div is identified by a unique id. Is there a method to show a specific div using a direct link? For instance, by entering domain.com/page.php#HiddenDiv2, it should ...

jquerycss

What are some ways to implement webkit-line-clamp on a website?

I'm trying to shorten my paragraph using the following CSS code: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, the issue is that it condenses everything into one line. I actually want the text to display on 3 lines before t ...

htmlcsswordpressweb

Determine browser compatibility by evaluating the DOM Level

Can we easily determine which browser versions and above are compatible with a certain DOM level? ...

javascripthtmldomcross-browser

Remove HTML code through an AJAX call

My HTML code utilizes ajax and jQuery to display a user's tweets, user_id, and the amount of tweets through an ajax request via an html form. The issue I am facing is that when I send new data, the old tweets are not being deleted. For example, if I r ...

jqueryajaxhtmltwitter

Is it considered acceptable to include paragraph elements within a heading tag in HTML5 (such as putting a <P> inside a <H1

Are paragraph elements allowed inside header tags in HTML5? Put simply, is this markup acceptable in HTML5? What are the implications of using it? <h1> <p class="major">Major part</p> <p class="minor"& ...

csshtmlw3c

Tips on concealing unnecessary subdirectories in a Firebase website URL

Looking to shorten the URLs of my webpages hosted on Firebase. The HTML files are located within an "html" folder inside the public directory. Currently, the URL for the index page is: www.lstein-28b62.web.app/htmlfolder/index.html Is there a way to chan ...

htmlfirebaseurlfirebase-hosting

What criteria do browsers follow to determine the specific colors to use for border styles like inset and outset?

When I set border: 1px outset blue; as the style for an element, the browser displays two distinct border colors: one for the top and left borders, and another for the bottom and right borders. li { border: 10px outset #0000FF; color: #FFF; ...

css

What new skills should I acquire following my mastery of HTML and CSS?

I have a vision of creating a website similar to funcage.com, a site filled with funny pictures where users can register, upload their own content, vote, and leave comments. After dedicating myself to learning HTML & CSS for over a year and completing the ...

htmlcssweb

Steps to bold a specific word within a div on react native

Hey there! I'm working with the code below: getDescription = () => { return( <div className="Description">{this.props.mytext + ': ' + this.name} </div> ) } Is it possible to bold only the specific te ...

cssreactjsreact-native

Issue with Materialize Sidenav: Not functional on iOS devices including iPhones, functions correctly on all other devices

My Materialize Sidenav is functioning on all devices except for iPad and iPhone. If you want to check out the code, here is the link to the repository: repo. Take a look at index.html (line 44 down) and js/onloadSetup.js. I attempted adding this in onload ...

javascriptioscssiphonematerialize

Manipulate the timing of css animations using javascript

I am currently working with a progress bar that I need to manipulate using JavaScript. The demo of the progress bar has a smooth animation, but when I try to adjust its width using jQuery $($0).css({'width': '80%'}), the animation disap ...

javascriptjquerycsscss-animations

Is it acceptable to use a readonly input with an HTML5 datalist?

Within my application, there is an html5 datalist implemented as shown below: <input type="text" list="mydatalist" /> <datalist id="mydatalist"> <option>Option 1</option> <option>Option 2</option> <option> ...

htmlhtml-datalist

The essential criteria for script tag and page validation requirements

There are instances where I have pages that contain only a script without any content (such as sending data through postMessage and then closing itself). In these cases, is the page considered valid with just <script>doSomeStuff</script> or do ...

javascripthtmltagsw3c-validation

What is the best way to incorporate JSON data into an HTML document?

Currently, I am working on a project involving the creation of a playable ad for Facebook. Per Facebook's ad specifications (), only a single HTML file under 2mb is accepted for uploading. This necessitates the inlining of all external references into ...

javascriptjsonhtmlbase64

Blurring images with a combination of jQuery Backstretch and Blurjs

I have a background image displayed using Backstretch and want to apply Blur.js to blur elements on top of it. However, when I try to use Blur.js on the backstretched image, it doesn't work. I believe this is happening because Blur.js uses the CSS pro ...

javascriptjqueryhtmlcss

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

phpjqueryhtmllaravel