Есть ли стандарт для генерации хорошо отформатированных форм?

Question

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

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

Есть несколько генераторов форм из Zend, Symphony, но я нахожу их немного сложными в использовании. Слишком много понятий в Zend (класс для каждого типа ввода) и для Symfony, вы должны встроить всю платформу.

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

Answer 1

Нет стандартной настройки .Форма начинается с элемента формы и содержит элементы управления вводом.То, как вы их структурируете, зависит от того, что форма должна отправлять, и того, что позволяет спецификация вашего (X) HTML-варианта.

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

См.

• http://www.w3.org/TR/html401/interact/forms.html (для HTML4)
• http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_forms (XHTML)
• http://www.w3.org/TR/html5/forms.html (HTML5)

Answer 2

Стандартная структура HTML для формы, которую легко стилизовать:

<form>
    <div>
        <label for="input-text">Input text:</label>
        <input type="text" id="input-text" name="input-text"/>
    </div> 
    <div>
        <label for="select-text">Select text:</label>
        <select id="select-text" name="select-text">
            <option value="1">Yes</option>
            <option value="0">No</option>
        </select>
    </div> 
    <div class="buttons">
        <input type="submit" value="Submit"/>
        <input type="reset" value="Reset"/>
    </div>
</form>

Вышеприведенное позволяет использовать <div> для стилизации строк полей, а структура <label> и <input> позволяет легко создавать строки или столбцы полей.

Последний <div class="buttons"> позволяет применять специальные стили к кнопкам формы.

Одна вещь, которую вы также можете рассмотреть, - поиск тега <fieldset> для группировки связанных полей.

Answer 3

Стандарт описан здесь: http://www.w3.org/TR/html401/interact/forms.html

Не совсем уверен, о чем именно вы спрашиваете

Answer 4

Вы смотрели на помощников по формам CakePHP и CodeIgniter ? Они могут дать вам несколько хороших идей для вашего генератора форм.

Answer 5

Пожалуйста, найдите здесь действительную форму с учетом всех специальных возможностей:

<div class="user" id="user-001">
    <form method="post" action="index.html" id="userform" name="userform">
    <fieldset>
        <legend>User Data</legend>
        <div id="field-username" class="field mandatory">
            <div class="label"><label for="username">User</label></div>
            <input type="text" id="username" name="username" tabindex="1" accesskey="U" value="" default="Utilisateur" title="Please choose a unique and funny Username" size="30" maxlengtth="30" />
        </div>
        <div  id="field-firstname" class="field">
            <div class="label"><label for="firstname">Firstname</label></div>
            <input type="text" id="firstname" name="firstname" tabindex="1" accesskey="N" value="" default="nom" title="Fill your Firstname" size="30" maxlengtth="30" />
        </div>
        <div  id="field-lastname" class="field">
            <div class="label"><label for="lastname">Lastname</label></div>
            <input type="text" id="lastname" name="lastname" tabindex="1" accesskey="m" value="" default="nom" title="Fill your own Lastname" size="30" maxlengtth="30" />
        </div>
        <div id="field-password1" class="field mandatory">
            <div class="label"><label for="password1">password</label></div>
            <input type="password" id="password1" name="password1" tabindex="1" accesskey="d" value="" default="******" title="Set a personal password" size="30" maxlengtth="30" />
        </div>
        <div  id="field-password2" class="field mandatory">
            <div class="label"><label for="password2">Password again</label></div>
            <input type="password" id="password2" name="password2" tabindex="1" accesskey="d" value="" default="******" title="Set again your password for validation purpose" size="30" maxlengtth="30" />
        </div>
        <div  id="field-email" class="field" >
            <div class="label"><label for="email">Mail</label></div>
            <input type="text" id="email" name="email"  tabindex="2" accesskey="S" value="" default="email@domain.com" title="Please fill-in a valide email" size="30" maxlengtth="100" />
            <div class="sample">ex: firstname.lastname@domain.com</div>
        </div>
        <div  id="field-datestart" class="field mandatory typedate" >
            <div class="label"><label for="datestart">Active from </label></div>
            <input type="date" id="datestart" name="datestart"  tabindex="3" accesskey="C" value="" title="Input the date of user account activation." />
            <div class="sample">ex: 17/05/2010</div>
        </div>
    </fieldset>
    <div class="command">
    <button type="submit" name="send" id="send" accesskey="E" title="click here to save your modifications"><strong>S</strong>ave</button>
    </div>
    </form>
</div>

Веселитесь с hHTML и CSS для оформления форм.

Answer 6

Ключевые вещи будут гарантировать, что HTML технически правильный. Этот сайт проверит его для вас.

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

FWIW, я начал писать генератор форм - PfP Studio - у него все еще много неровностей и янашел время недавно поработать над этим.Вы также можете взглянуть на Прадо, Радрия, phpeanuts и phpformgen.

HTH

C.