HTML5 CSS3 Плавающий ввод текста над ячейкой, содержащей изображение

Question

В поисках простого и быстрого способа добавить текст поверх изображения, когда пользователь заполняет поля формы.

Я пытаюсь создать форму заказа для проекта Brick Design Project, который я выполняю иэто сводит меня с ума.

Я пытаюсь сделать это простым, поскольку я просто пытаюсь научиться стилю и кодированию с помощью CSS3 и HTML5.

<table>
<tr>
    <td>
        <br />&nbsp;
        <br /> &nbsp;
        <br /> &nbsp;
        <br />
        <label for="Line1">Line1:</label>
        <input id="Line1" name="Line1" value="" maxlength="18">
        <br />&nbsp;
        <br />
        <label for="Line2">Line2:</label>
        <input id="Line2" name="Line2" value="" maxlength="18">
        <br />&nbsp;
        <br />
        <label for="Line3">Line3:</label>
        <input id="Line3" name="Line3" value="" maxlength="18">
        <br />&nbsp;
        <br />
    </td>
    <td>
    </td>
</tr>
<tr>
    <td><img src="paver.jpg" width="100%" height="100%" border="2" alt="" /> [Line1]
        </br>[Line2]</br>[Line3]</br>
    </td>
    <td>
        <input type="reset" value="Reset Values">
        <br />
    </td>
    <td>
        <input type="submit" value="Quick View">
    </td>
</tr>

Answer 1

В правильно используемых HTML5 и CSS3 главное состоит в том, чтобы отделить презентацию от контента.

-> Контент: входит в HTML.

Таким образом, у вас есть метки from, inputполя, некоторые кнопки

У вас нет таблицы!(при просмотре контента)]

-> макет (презентация) переходит в CSS

Здесь у вас есть размеры, позиционирование, цвета, фоновые изображения и т. д.

Теперь ваше изображение, которое вы хотите за своей формой: трудно сказать заранее, что это должна быть презентация (я бы предположил, что в 99% случаев это будет), но в более редких случаях это можно утверждать иначе.

Как только вы разберетесь с этим, то, как он выглядит, будет простым CSS, а в CSS наложение объектов друг на друга или использование фоновых изображений и т. Д. - все это довольно просто.

Итак, что вы хотитев итоге?

HTML:

• форма!
• набор полей (опционально)
• поля ввода (им нужен тип AFAIK)

Старайтесь избегать всего, что только есть, из-за того, как оно выглядит.

CSS: все необходимое для того, чтобы оно выглядело так, как вы хотите (но у вас сейчас ничего нет,так что довольно трудно подтолкнуть вас в правильном направлении)

Я бы предложилхороший учебник.

Ссылка: (они содержат намного больше деталей и примеров)

• https://www.w3.org/TR/html5/forms.html
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms