Блог

Главная - Вопросы по программированию - Как наилучшим образом отформатировать HTML-форму, подобную этой, где пользователь может динамически добавлять подполя? (таблица? список? css3?)

Как наилучшим образом отформатировать HTML-форму, подобную этой, где пользователь может динамически добавлять подполя? (таблица? список? css3?)

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я хочу создать форму, подобную изображенной ниже:

введите описание изображения здесь

Я вижу много способов использования таблицы, css, списков, но хочу знать, как наилучшим образом реализовать то, что я изобразил. Идея в том, что у «Учащегося (ов)» есть имя и возраст, связанные с ним, и при нажатии на ссылку «Добавить строку» новая пара полей имени и возраста появится прямо под ней.

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

Я отказался от этого http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms /

Но возникли проблемы с настройкой, чтобы она выглядела так, как я изобразил выше. Если кто-нибудь может помочь показать мне, как наилучшим образом достичь этого, я был бы очень признателен.

Комментарии:

1. HTML5 не является анти-таблицей, это просто про-семантика. В этом случае было бы неплохо использовать <table> , поскольку информация, по сути, является таблицей значений.

Ответ №1:

Если вы используете этот скрипт:

  var lastUsed=0;

function addGroup()
{
   lastused  ;
   namstr='StName' lastused;
   agestr='StAge' lastused;
   str='<div> Name: <input type="text" name="' namstr '" value="">
   Age: <input type="text" name="' agestr '" value=""></div>';
   document.getElementById('formBlock').innerHTML =str;
}

С помощью этого HTML:

 <form name="myform" action... etc>
<div id="formBlock">
    Class Name: <input type="text" name="clName" value=''>
    <div> Name: <input type="text" name="StName0" value="">
    Age: <input type="text" name="StAge0" value=""></div>
</div>
<textarea>....etc

</form>

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

Ответ №2:

Вам нужно разделить вашу страницу на блоки. Каждый блок будет элементом div . С помощью CSS вы будете управлять макетом и размером. Я думаю, в вашем случае это будет 4 divs

Ответ №3:

Для структуры HTML просто используйте div, чтобы заключить строку и метки и входные данные для элементов:

 <div>
<label for="name-1">Name</label><input type="text" id="name-1" />
<label for="age-1">Age</label><input type="text" id="age-1" />
</div>
<input type="button" value="Add Row" id="addRow" />

В скрипте для добавления новой строки вам нужно увеличить атрибуты ids и for при добавлении.