Form Submit By Click On A Div Element Without Js

Let me have a div element which is located inside a form as follows:

Solution 1:

I don't recommend doing this but you can wrap a submit button on the div.

<fromid = "someForm"><buttontype="submit"><divid = "someDiv"><!-- Some Content --></div></button></form>

Solution 2:

if you want to play with button

Demo

button {
    border:0;
    background:none;
}

---

But i would suggest it this way (inline- JS)

Demo

HTML

<div id="something" onclick="javascript:somefunction();"  >i am here</div>

CSS

div {
    border:0;
    background:none;
    cursor :pointer;
    width:100px;
    height:100px
}

---

using anchor tag a for same

Demo

HTML

<a id="something" href="javascript:somefun()" <!-- or some url page -->>i am here</a>

CSS

a {
    display:block;
    border:0;
    background:none;
    width:100px;
    height:100px;
    text-decoration:none;
    color:black
}

Solution 3:

You could have an invisible button that entirely covers your content:

<form id="someForm">
    <div id="someDiv">
        Some Content
        <input type="submit" />
    </div>
</form>

CSS

#someDiv {position:relative;}
#someDiv > input {display:block; position:absolute; border:none; width:100%; height:100%; top:0; left:0; opacity:0.01;}

EG: http://jsfiddle.net/3q94jq3a/

Solution 4:

In a nutshell: No, you cannot submit a form using only CSS. You must use Javascript to call a function.