Изображение кнопки в виде кнопки ввода формы?

<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>

Я использую изображение вместо кнопки отправки. Как я могу отправить данные для входа, когда пользователь нажимает на изображение входа в качестве кнопки отправки?

Ответы

Ответ 1

Вы можете использовать кнопку отправить изображение:

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

Ответ 2

Поздно до разговора...

Но почему бы не использовать CSS? Таким образом, вы можете сохранить кнопку как тип отправки.

HTML:

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

CSS:

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

Работает как шарм.

РЕДАКТИРОВАТЬ: Если вы хотите удалить стили кнопок по умолчанию, вы можете использовать следующие CSS:

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

из этого ТАКОГО вопроса

Ответ 3

Вы также можете использовать второе изображение, чтобы дать эффект нажатия кнопки. Просто добавьте "нажатое" изображение кнопки в 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" на этой странице

Ответ 4

<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>

Это рабочий код для него.

Ответ 5

Сделайте кнопку отправки основным изображением, которое вы используете. Таким образом, теги формы будут первыми, а затем отправьте кнопку, которая является вашим единственным изображением, так что изображение является вашей формой кликабельного изображения. Затем просто поставьте все, что вы проходите, перед кодом кнопки отправки.

Ответ 6

Это может быть полезно

<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