CODEWITHSUNDEEP
htmlcssinputforms
user7943190
user7943190

Reputation:

How to create a rounded image input for a form in html and css

I have a form i'm making, and at the top i'd like to have an rounded image input like the one in the screenshot below, so when the user clicks it, they can upload their own image.My design for a website, including the image input

Upvotes: 0

Views: 8100

Answers (4)

Mithu Mondal
Mithu Mondal

Reputation: 265

If i got your question, this is the way of doing it : by having a hidden input and jQuery

HTML:

<form>
   <img src="http://via.placeholder.com/150x150" style="border-radius:50%"/>
   <input type="file" id="myfile" style="display:none"/>
</form>

and javascript

$('#image').click(function(){
    $('#myfile').click()
})

JS fiddle: https://jsfiddle.net/r89gbqh6/

Hope that helps! ;)

Upvotes: 3

vasanths294
vasanths294

Reputation: 1637

Upload file or image

You need to use PHP or any other scripting language along with HTML. Refer above link to PHP code.

Upvotes: 1

kode29
kode29

Reputation: 11

You can use "border-radius: 100%;" to make an image smooth out to a circle. See the border-radius demos at W3Schools. The same property works on field elements too (input, textarea, etc), but 100% will make any inputs an oval, so I'd recommend using a smaller value.

I've provided an example below of an image and an input field.

img{
  border-radius: 100%;
 }
 input{
  border-radius: 15px;
  border: 1px #000 solid;
 }
<img src="http://via.placeholder.com/150x150" alt=""/>
<br/>
<input type="text"/>

Upvotes: 1

vasanths294
vasanths294

Reputation: 1637

<style>
img {
  border-radius: 50%;
}
</style>

<body>

<img src="sample.jpg" alt="profilepic" style="width:200px">
</body>

Use border radius as specified above. And make the image an link.

Upvotes: 1

Related Questions