Могу ли я заменить входной элемент ввода изображением, чтобы отправить форму обратно без использования JavaScript? - PullRequest
Новая
       14

Могу ли я заменить входной элемент ввода изображением, чтобы отправить форму обратно без использования JavaScript?

1 голос
/ 15 августа 2010

Я видел кнопки , которые имеют хорошую форму. Я скачал пару из них, чтобы примерить мое приложение. Я ожидал получить изображение, которое будет использоваться в качестве фона для моих кнопок и текстовых полей. Но, скачанный файл содержит 2 изображения и скрипт. Мне кажется, эти элементы управления предназначены для замены кнопок и текстовых полей HTML.

Если они должны заменить обычные кнопки, как я могу опубликовать форму с изображением? С javascript это осуществимо. Но возможно ли получить то же самое без JavaScript?

Спасибо за помощь

Ответы [ 2 ]

2 голосов
/ 15 августа 2010

Вы можете использовать <input type="image"/> для этого: 

<input type="image" src="your-fancy-button.png" alt="Submit"/>
2 голосов
/ 15 августа 2010

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

HTML: 

<input type="submit" class="button" value="Go!"/>
<input type="button" class="button" value="Cancel!"/>

И CSS: 

.button{
     background: #FFF url('images/button-bg.jpg') repeat-x;
     color: #000;
     font: 1.0em Tahoma;
     border: 1px solid #D4D4D4;
     cursor: pointer; /* Change cursor to 'hand' when hovering the button */
}
.button:hover{
     background: #EEE url('images/button-hover-bg.jpg') repeat-x;
     border: 1px solid #666;
}

Пример того, что вам даст вышеуказанный стиль:

Чувак она симпатичная http://img714.imageshack.us/img714/5773/84220208.png

Обратите внимание, что текст value кнопок по-прежнему будет отображаться, что позволит вам сохранить форму доступной.

Такие кнопки сохраняют свою полезность, будучи гораздо красивее. Очень похоже на женщин с косметикой.

Дополнительные ресурсы: http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

...