How to code this form

So I recently got back into coding and I don't how to go about coding this form. Can someone help out. I'm using plain html and css. Thanks in advance
No description
No description
3 Replies
missymae
missymae12mo ago
It looks like a <div> with a box-shadow. Inside the div, 3 <input> elements with <svg> icons, label and placeholder, and lastly a button. Input labels maybe z-indexed and positioned for the nice cut out effect. Styling for padding, margin, border and border radius and text-alignment.
MarkBoots
MarkBoots12mo ago
here a start. I use <fieldset> for the border with label text inside a <legend> https://codepen.io/MarkBoots/pen/LYavLeG
EIO
EIO12mo ago
@MarkBoots funnily enough, I actually did this just last week. I was going to go the dramatic route, using pseudo elements to handle it. Then it clicked, "isn't that what fieldset is for?"

Did you find this page helpful?