@drawohara — ¡Me ❤️ esto! << haz clic aquí 🐛 🫖 🧚
/know-thy-forms
publicado el: 2013-06-17

Hoy he creado un pequeño cuestionario sobre formularios HTML.

ref: https://gist.github.com/ahoward/98591ebc9113bea1cf02

  <!--
bifurca esto. no uses internet. tómate < 10 minutos para encontrar al menos 10
errores distintos en este formulario. envía tu respuesta en el campo de comentarios de
tu bifurcación y envíame por correo electrónico (ara[at]dojo4.com) la url.
-->
  <form method='DELETE' ACTION='./' enctype="multipart/file-upload">
    
    <fieldset>
      <legend> etiquetas </legend>
      <input type='text' name='etiquetas' value='foo'/>
      <input type='text' name='etiquetas' value='bar'/>
    </fieldset>
    <label for='foo'>Foo: </label> <input name='foo'> <input name='foo'>
    <label>
      Bar: <input name='bar'>
    </label>
    <input name='email' readonly/>
    <input name='password' disabled=disabled/>
    <input type='file' name='file' value='.bashrc'/>
    <fieldset>
      <legend>Sexo</legend>
        <input type="radio" name="sexo">
          <option value='hombre'>Hombre</option>
          <option value='mujer'/>
        </input>
      <fieldset>
        <legend>Transporte</legend>
          <input type="checkbox" name="vehículo" value="Bicicleta">Tengo una bicicleta<br>
          <input type="checkbox" name="vehículo" value="Coche">Tengo un coche 
      </fieldset>
    </fieldset>
    <select name='habilidades-desarrollo-web'>
      <option value='A'>
      <option value='B'>
      <option value='C'>
      <option value='D'>
      <option value='F'>
    </select>
    
    <hr>
    <button type='submit'>
  </form>

El objetivo de hacer que la gente escanee este formulario HTML completamente roto era simplemente ver la línea de pensamiento de las personas con esto: la columna vertebral de las interfaces HTML.

A continuación se presentan algunas respuestas de ejemplo, agrupadas aproximadamente por categoría, y comentarios sobre cada una de ellas.

doctype estropeado

Seguramente, la mayoría de la gente pasó por alto que muchos errores dependían de la declaración del doctype. qué estilo de etiquetas puedes usar depende completamente del doctype.

método=delete

aunque pensamos en verbos http con apis de cliente, incluyendo javascript. para la mayoría de los navegadores obtienes GET y POST. esto es importante si has estado considerando una api basada en xhtml.

enctype=basura

los errores de enctype siempre desperdician un día. equivócate y desperdiciarás el día publicando el nombre de tu archivo como una cadena, en lugar del contenido del archivo codificado. también es importante señalar que el enctype simplemente dicta cómo se codifica el formulario y es completamente ortogonal al verbo http utilizado.

input=foo && input=foo

Muchas ideas erróneas sobre esto. es totalmente legítimo publicar el mismo parámetro > 1 veces en un formulario. la especificación lo soporta e incluso el antiguo soporte cgi soporta la noción de publicar múltiples valores bajo la misma clave. es simplemente convención que muchos controladores vuelcan estos en un hash donde 'el último gana’

puedes probarlo fácilmente tu mismo. publica esto desde un formulario

  <input name='respuesta' value='40'>
  <input name='respuesta' value='2'>
      
  

y verás lo siguiente en la consola del navegador

<img
style =’max-height:420px;’ src=’http://cl.ly/image/3I2Q2v0D1B1G/Screen%20Shot%202013-06-17%20at%204.09.23%20PM.png’

si manejas la publicación del formulario de la siguiente manera

  def formulario
    return if request.get?
    
    parsed = Parser.new(env).parse
    
    render :json => parsed.as_json, :layout => true
  end
# hackea el parser de rack para mostrar que http SÍ publica múltiples valores
# y que, si queremos, podríamos acumularlos
#
  class Parser < Rack::Multipart::Parser
    def setup_parse
      super
    ensure
      @params = KeyList.new
    end
    class KeyList
      def initialize(*args, &block)
        @params = {}
      end
      
      def [](key)
        @params[key]
      end
      
      def []=(key, value)
        (@params[key] ||= []).push(value)
      end
      
      def key?(key)
        @params.key?(key)
      end
      
      def to_params_hash()
        self
      end
    end
  end

luego obtendrás una respuesta que se ve así

  {"params":{"respuesta":["40","2"]}}

Resumen;

tu stack web puede eliminar múltiples valores al cargar un hash, pero la biblioteca cgi.rb de ruby y http en general no lo hacen. esto se aplica a entradas, checkboxen, etc - cualquier cosa con nombre puede pasar múltiples valores.

en particular, la biblioteca cgi.rb de ruby no limita la publicación de múltiples valores bajo una clave

mientras que rails sí

las etiquetas son blargh

las etiquetas sin un for son totalmente legítimas. cuando envuelves una entrada con una etiqueta, el 'for' se implica como la entrada contenida. estas son equivalentes

<label for='foo'>Foo</label> <input name='foo'>
<label for='foo'>Foo <input name='foo'></label>

con el primero siendo mucho más simple de manejar en js ( $label.find(‘input’) )

 $label.find('input')
 

vs.

 
  var name = $label.attr('for');
  
  $input = $('name[' + name ']');
 

readonly y disabled son difíciles

readonly y disabled son ambos atributos booleanos y, como tales, tienen tanto permutaciones con comillas/sin comillas como con valor/sin valor

todos estos están bien

  <input readonly>
  <input readonly=readonly>
  <input readonly="readonly">

aunque ser consistente y usar comillas es más ampliamente manejado en editores de texto

refs:

form[action]