Как заполнить форму HTML с помощью CSS?

Question

У меня есть форма HTML с переключателями, флажками, текстовыми полями и выпадающими списками. Поскольку я хочу, чтобы пользователь заполнил все в моей форме, ни один из переключателей и флажков не установлен, а текстовые поля пустые.

Я хотел бы написать файл CSS, который заполнит форму ответами (я не хочу менять свой HTML-файл). Возможно ли это?

Я бы оценил пример или любую другую идею?

Спасибо!

Answer 1

Нет, это невозможно. CSS предназначен для стиля, а не для разметки, а изменение содержимого поля ввода требует модификации разметки.

Похоже, вы можете рассмотреть JavaScript, который может использоваться для изменения содержимого любого элемента, включая элементы формы.

Answer 2

Javascript - ваш лучший выбор. Однако, если вы хотите заполнить -sample- ответы, как «Имя» в текстовой области, что бы обозначалось «Имя»: вы можете сделать что-то вроде <input type='text' value='First Name' name='emailForm'>, а атрибут value будет заполнен при загрузке страницы.

Answer 3

CSS предназначен для проектирования и дизайна веб-страницы. Хотя его возможности были использованы для привлечения многих трюков, это не решение для всех. Что вам нужно сделать, это вытащить данные, которые вам нужно заполнить, и поместить их в свои поля.

Вы можете сделать это двумя способами:

1. Использование на стороне сервера язык, как PHP/ASP.Net, чтобы предварительно заполнить эту информацию.
2. Используйте Javascript/JQuery/MooTools или некоторую другую структуру, чтобы заполнить ее на стороне клиента, взяв данные с сервера.

Если информация статическая, то это очень просто, потому что вы можете просто поместить эту информацию в состав самого содержимого HTML.

Если этот ответ не подходит для вас, добавьте больше информации на свой вопрос.

Answer 4

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

Вот образец формы:

<form ...> 
    <input name="firstName" /> 
    <input name="lastName" /> 
</form> 

и соответствующий JQuery/JavaScript:

$(function() { 
    $("input[name=firstName]").val("John"); 
    $("input[name=lastName]").val("Doe"); 
}); 

Должно быть достаточно легко расширить до более широкой и более сложной формы. Вы можете легко использовать классы или идентификаторы для элементов и селекторов jQuery.