버튼 이미지를 양식 입력 제출 버튼으로?

버튼 이미지를 양식 입력 제출 버튼으로?

---

<form method="post" action="confirm_login_credentials.php">
    <table>
        <tr>
            <td>User ID:</td>
            <td><input type="text" id="uid"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="text" id="pass"></td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <a href="#"><img src="images/login.jpg"></a>
            </td>
        </tr>
    </table>
</form>

제출 버튼 대신 이미지를 사용하고 있습니다. 사용자가 제출 버튼처럼 로그인 이미지를 클릭 할 때 로그인 정보를 제출하려면 어떻게해야합니까?

---

이미지 제출 버튼을 사용할 수 있습니다 .

<input type="image" src="images/login.jpg" alt="Submit Form" />

---

대화에 늦게 ...

그러나 CSS를 사용하지 않는 이유는 무엇입니까? 이렇게하면 버튼을 제출 유형으로 유지할 수 있습니다.

html :

<input type="submit" value="go" />

css :

button, input[type="submit"] {
    background:url(/images/submit.png) no-repeat;"
}

매력처럼 작동합니다.

편집 : 기본 버튼 스타일을 제거하려면 다음 CSS를 사용할 수 있습니다.

button, input[type="submit"]{
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

이 SO 질문에서

---

두 번째 이미지를 사용하여 버튼을 누르는 효과를 줄 수도 있습니다. HTML입력 이미지 앞에 "눌린"버튼 이미지를 추가하기 만하면 됩니다.

<img src="http://integritycontractingofva.com/images/go2.jpg" id="pressed"/>
<input id="unpressed" type="submit" value=" " style="background:url(http://integritycontractingofva.com/images/go1.jpg) no-repeat;border:none;"/>

CSS마우스를 올려 놓을 때 "누르지 않은"이미지의 불투명도를 변경하는 데 사용 합니다.

#pressed, #unpressed{position:absolute; left:0px;}
#unpressed{opacity: 1; cursor: pointer;}
#unpressed:hover{opacity: 0;}

이 페이지 의 파란색 "GO"버튼에 사용 합니다.

---

<div class="container-fluid login-container">
    <div class="row">
        <form (ngSubmit)="login('da')">
            <div class="col-md-4">
                    <div class="login-text">
                        Login
                    </div>
                    <div class="form-signin">
                            <input type="text" class="form-control" placeholder="Email" required>
                            <input type="password" class="form-control" placeholder="Password" required>
                    </div>
            </div>
            <div class="col-md-4">
                <div class="login-go-div">
                    <input type="image" src="../../../assets/images/svg/login-go-initial.svg" class="login-go"
                         onmouseover="this.src='../../../assets/images/svg/login-go.svg'"
                         onmouseout="this.src='../../../assets/images/svg/login-go-initial.svg'"/>
                </div>
            </div>
        </form>
    </div>
</div>

이것이 작동하는 코드입니다.

---

제출 버튼을 사용중인 기본 이미지로 만드십시오. 따라서 양식 태그가 먼저 나온 다음 유일한 이미지 인 제출 버튼이 표시되므로 이미지가 클릭 가능한 이미지 양식입니다. 그런 다음 제출 버튼 코드 앞에 전달하는 내용을 입력하십시오.

---

이것은 도움이 될 수 있습니다

<form action="myform.cgi"> 
 <input type="file" name="fileupload" value="fileupload" id="fileupload">
 <label for="fileupload"> Select a file to upload</label> 
 <br>
 <input type="image" src="/wp-content/uploads/sendform.png" alt="Submit" width="100"> </form>

자세히보기 : https://html.com/input-type-image/#ixzz5KD3sJxSp

참고 URL : https://stackoverflow.com/questions/3381609/button-image-as-form-input-submit-button