VALORES HTML PARA FORMULARIOS
He aquí algunos valores o códigos en HTML para realizar formularios, ojala de algo puedan servirles.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Nuevas caracteristicas de HTML 5 en formularios</title>
</head>
<body>
<h1>Nuevas caracteristicas de HTML 5 en formularios</h1>
<p>Ejemplos sobre las nuevas caracteristicas de HTML 5 en formularios</p>
<form id="form-order">
<p>
<label for="name"> Nombre(obligatorio)</label>
<input type="text" name="name" id="name"
placeholder="Gabriel Cruz"
autofocus
autocomplete
required>
</p>
<p>
<label for="passwd"> Contraseña(obligatoria)</label>
<input type="password" name="passwd" id="passwd"
placeholder="qwe1234"
pattern="[a-z]{3}(0-9){4}"/>(la contraseña debe contener 3 letras y 4 numeros en este orden)
</p>
<p>
<label for="phone">Telefono</label>
<input type="tel" name="phone" placeholder="+7965453635">
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="ejemplo@gmail.com">
</p>
<p>
<label for="Website"> Tu pagina web </label>
<input type="url" name="website" id="website" placeholder="http://www.tuweb.com">
<p>
<label for="number example">No. de Temas</label>
<input type="number name="number example" id=""number example"
min="2" max="14" placeholder="2" step="2"> 8entre 2 y 14, solo pares)
</p>
<p>
<label for="deliverydate"> Fecha de envio</label>
<input type="date" name="deliverydate" id="deliverydate" min="2017-07-01"> (minimo 01 de julio d e2017)
</p>
<P>
<label for="Colorexample">color de item</label>
<input type="color" name="colorexample" value="#1a33ff">
</p>
<p>
<label for="search">Buscar </label>
<input type="search" name="search" id="search">
</p>
<p>
<label for="points"> Rango de Valores</label>
<input type="range" name="points" id="points" min="1" max"10"> (entre 1 y 10)
</p>
<p>
<fieldset>
<legend>selecciona una prioridad</legend>
<p><label><input type="radio" name="priority" value="baja" checked>Baja</label></p>
<p><label><input type="radio" name="priority" value="baja" checked>Media</label></p>
<p><label><input type="radio" name="priority" value="baja" checked>Alta</label></p>
</fieldset>
</p>
<p>
<fieldset>
<legend>Selecciona el tipo de envio</legend>
<p><label><input type="checkbox" name="deliverytype" value="urgente" checked>Urgente</label></P>
<p><label><input type="checkbox" name="deliverytype" value="acuse">Con acuse de recibo</label></P>
<p><label><input type="checkbox" name="deliverytype" value="reembolso">Contra reembolso</label></P>
</fieldset>
</p>
<input type="submit" value="enviar">
</form>
</body>
</html>
<head>
<meta charset="utf-8">
<title>Nuevas caracteristicas de HTML 5 en formularios</title>
</head>
<body>
<h1>Nuevas caracteristicas de HTML 5 en formularios</h1>
<p>Ejemplos sobre las nuevas caracteristicas de HTML 5 en formularios</p>
<form id="form-order">
<p>
<label for="name"> Nombre(obligatorio)</label>
<input type="text" name="name" id="name"
placeholder="Gabriel Cruz"
autofocus
autocomplete
required>
</p>
<p>
<label for="passwd"> Contraseña(obligatoria)</label>
<input type="password" name="passwd" id="passwd"
placeholder="qwe1234"
pattern="[a-z]{3}(0-9){4}"/>(la contraseña debe contener 3 letras y 4 numeros en este orden)
</p>
<p>
<label for="phone">Telefono</label>
<input type="tel" name="phone" placeholder="+7965453635">
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="ejemplo@gmail.com">
</p>
<p>
<label for="Website"> Tu pagina web </label>
<input type="url" name="website" id="website" placeholder="http://www.tuweb.com">
<p>
<label for="number example">No. de Temas</label>
<input type="number name="number example" id=""number example"
min="2" max="14" placeholder="2" step="2"> 8entre 2 y 14, solo pares)
</p>
<p>
<label for="deliverydate"> Fecha de envio</label>
<input type="date" name="deliverydate" id="deliverydate" min="2017-07-01"> (minimo 01 de julio d e2017)
</p>
<P>
<label for="Colorexample">color de item</label>
<input type="color" name="colorexample" value="#1a33ff">
</p>
<p>
<label for="search">Buscar </label>
<input type="search" name="search" id="search">
</p>
<p>
<label for="points"> Rango de Valores</label>
<input type="range" name="points" id="points" min="1" max"10"> (entre 1 y 10)
</p>
<p>
<fieldset>
<legend>selecciona una prioridad</legend>
<p><label><input type="radio" name="priority" value="baja" checked>Baja</label></p>
<p><label><input type="radio" name="priority" value="baja" checked>Media</label></p>
<p><label><input type="radio" name="priority" value="baja" checked>Alta</label></p>
</fieldset>
</p>
<p>
<fieldset>
<legend>Selecciona el tipo de envio</legend>
<p><label><input type="checkbox" name="deliverytype" value="urgente" checked>Urgente</label></P>
<p><label><input type="checkbox" name="deliverytype" value="acuse">Con acuse de recibo</label></P>
<p><label><input type="checkbox" name="deliverytype" value="reembolso">Contra reembolso</label></P>
</fieldset>
</p>
<input type="submit" value="enviar">
</form>
</body>
</html>
y quedaría asi:
 |
Formularios HTML
|
html>
<head>
<header><h1><strong>FORMULARIOS</strong></h1>
</header>
<body>
TU PAGINA WEB: <input type="url" name0"url">
NUMERO TELEFONICO: <input type="tel" name="telf" pattern="(+[0-9]{2})[0-9]{9}"/>
E-MAIL: <input type="email" name="email"/><br/>
<br/>
REGION: <input type="numer" name="cantidad" min="1" max="15" value="14"/>
COLOR FAVORITO: <input type="color" name="favcolor" value="#123456"/>
busqueda: <input type="search" name="buscador"/><br/>
<br/>
date time: <input type="datetime" name="fechahora"/>
date time: <input type="datetime-local" name="fechahora_usuario"/>
date: <input type="date" name="fecha"/><br/>
<br/>
month: <input type="mont" name="mes"/>
week: <input type="week" name="semana"/>
time: <input type="time" name="hora"/><br/>
<br/>
autocomplete: <form autocomplete="on">
<input type="email" name="email" autocomplete="off">
autofocus: <input type="text" name="nombre" autofocus/>
min y max: <input type="number" name="cantidad" min="2" max="14"> <br/>
<br/>
step: <input type="number" name="puntos" min="2" max="14" step="2" value="2"/>
pattern: <input type="text" name="prefijo-pais" perttern="[A-Za-z]{3}" title="Codigo de 3 letras"/>
placeholder: nombre: <input type="text" name="nombre" plceholde="Gabriel Cruz"/><br/>
<br/>
requiered: requerimiento: <input type="text" name="nombre" requiered/>
</body>
</head>
</html> y quedaría asi:
<head>
<header><h1><strong>FORMULARIOS</strong></h1>
</header>
<body>
TU PAGINA WEB: <input type="url" name0"url">
NUMERO TELEFONICO: <input type="tel" name="telf" pattern="(+[0-9]{2})[0-9]{9}"/>
E-MAIL: <input type="email" name="email"/><br/>
<br/>
REGION: <input type="numer" name="cantidad" min="1" max="15" value="14"/>
COLOR FAVORITO: <input type="color" name="favcolor" value="#123456"/>
busqueda: <input type="search" name="buscador"/><br/>
<br/>
date time: <input type="datetime" name="fechahora"/>
date time: <input type="datetime-local" name="fechahora_usuario"/>
date: <input type="date" name="fecha"/><br/>
<br/>
month: <input type="mont" name="mes"/>
week: <input type="week" name="semana"/>
time: <input type="time" name="hora"/><br/>
<br/>
autocomplete: <form autocomplete="on">
<input type="email" name="email" autocomplete="off">
autofocus: <input type="text" name="nombre" autofocus/>
min y max: <input type="number" name="cantidad" min="2" max="14"> <br/>
<br/>
step: <input type="number" name="puntos" min="2" max="14" step="2" value="2"/>
pattern: <input type="text" name="prefijo-pais" perttern="[A-Za-z]{3}" title="Codigo de 3 letras"/>
placeholder: nombre: <input type="text" name="nombre" plceholde="Gabriel Cruz"/><br/>
<br/>
requiered: requerimiento: <input type="text" name="nombre" requiered/>
</body>
</head>
</html> y quedaría asi:
<!doctype html>
<title>Formulario de prueba de HTML5</title>
<form action="" method="get">
<p>Nombre:
<input type="text" name="name_control" autofocus="" required="">
</p>
<p>Correo electrónico:
<input type="email" name="email_control" required="">
</p>
<p>URL:
<input type="url" name="url_control" placeholder="Escribe la URL de tu página web personal">
</p>
<p>Fecha:
<input type="date" name="date_control">
</p>
<p>Tiempo:
<input type="time" name="time_control">
</p>
<p>Fecha y hora:
<input type="datetime" name="datetime_control">
</p>
<p>Mes:
<input type="month" name="month_control">
</p>
<p>Semana:
<input type="week" name="week_control">
</p>
<p>Número (min -10, max 10):
<input type="number" name="number_control" min="-10" max="10" value="0">
</p>
<p>Teléfono:
<input type="tel" name="tel_control">
</p>
<p>Término de búsqueda:
<input type="search" name="search_control">
</p>
<p>Color favorito:
<input type="color" name="color_control">
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form> y quedaría asi:
<p>Nombre:
<input type="text" name="name_control" autofocus="" required="">
</p>
<p>Correo electrónico:
<input type="email" name="email_control" required="">
</p>
<p>URL:
<input type="url" name="url_control" placeholder="Escribe la URL de tu página web personal">
</p>
<p>Fecha:
<input type="date" name="date_control">
</p>
<p>Tiempo:
<input type="time" name="time_control">
</p>
<p>Fecha y hora:
<input type="datetime" name="datetime_control">
</p>
<p>Mes:
<input type="month" name="month_control">
</p>
<p>Semana:
<input type="week" name="week_control">
</p>
<p>Número (min -10, max 10):
<input type="number" name="number_control" min="-10" max="10" value="0">
</p>
<p>Teléfono:
<input type="tel" name="tel_control">
</p>
<p>Término de búsqueda:
<input type="search" name="search_control">
</p>
<p>Color favorito:
<input type="color" name="color_control">
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form> y quedaría asi:
vaya, de igual manera alguno código te pueden servir para agregarlos a tu pagina web en construcción, si estas como yo en el proceso de aprendizaje de HTML, cordiales saludos!!
No hay comentarios.:
Publicar un comentario