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

Question

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

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

Answer 1

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

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

Answer 2

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

Но почему бы не использовать 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;
}

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

Answer 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" на этой странице

Answer 4

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

<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

Answer 5

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

Answer 6

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

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