PAW

Lic. en Sistemas de Información

PAW

Lic. en Sistemas de Información

Speaker:

A.S. Pablo Cesar CHALE

pcchale@gmail.com

Formularios HTML

Campos de Entrada

Índice:

  1. Estructura del Formulario
  2. Campos de entrada
  3. Más Controles

input

Texto

						<label for="inputTexto">
	Texto:
	<input type="text" name="inputTexto" 
		maxlength="10" minlength="5"/>
</label>
						
						

input

Números

<label for="inputNumber">
	Número:
	<input type="number" name="inputNumber"
		value="0" min="0" max="2" step="0.1" />
</label>

<label for="inputRange">
	Número:
	<input type="range" name="inputRange"
		step="10" min="0" max="100"	/>
</label>

Input

Datos de contacto

<label for="inputTel">
	Teléfono:
	<input type="tel" name="inputTel"
	pattern="/^(?:(?:00)?549?)?0?(?:11|[2368]\d)(?:(?=\d{0,2}15)\d{2})??\d{8}$/" />
</label>

<label for="inputEmail">
	email:
	<input type="email" name="inputeEmail" />
</label>

<label for="inputURL">
	URL:
	<input type="url" name="inputURL" />
</label>

Input

Fecha y Hora

<label for="inputTime">
	Horas y Min:
	<input type="time" />
</label>

<label for="inputDate">
	Fechas:
	<input type="date" name="inputDate" />
</label>

<label for="inputDatetime">
	Fecha y Hora:
	<input type="datetime" name="inputDatetime" />
</label>

<label for="inputWeek">
	Semana:
	<input type="week" name="inputWeek" />
</label>

<label for="inputMonth">
	Mes:
	<input type="month" name="inputMonth" />
</label>
						

Input

Algunos más

<label for="inputSearch">
	Busquedas:
	<input type="search" name="inputSearch" />
</label>

<label for="inputPassword">
	Password:
	<input type="password" name="inputPassword" />
</label>

<label for="inputColor">
	Color:
	<input type="color" name="inputColor" />
</label>
						

Input

Opciones

<fieldset>
	<legend>Checkbox: </legend>
	<label for="inputCheckbox">
		<input type="checkbox" name="inputCheckbox" value="opcion1" /> 
		Opción 1
	</label>
	<label for="inputCheckbox">
		<input type="checkbox" name="inputCheckbox" value="opcion2"
	           checked="checked" /> 
		Opción 2
	</label>
	<label for="inputCheckbox">
		<input type="checkbox" name="inputCheckbox"	value="opcion3" /> 
		Opción 3
	</label>
</fieldset>

<fieldset>
	<legend>Radio: </legend>
	<label for="inputRadio">
		<input type="radio" name="inputRadio" value="opcion1"/> 
		Opción 1
	</label>
	<label for="inputRadio">
		<input type="radio" name="inputRadio"	value="opcion2"
			  checked="checked" /> Opción 2
	</label>
	<label for="inputRadio">
		<input type="radio"	name="inputRadio" value="opcion3" /> 
		Opción 3
	</label>
</fieldset>
Checkbox:
Radio

Input

oculto

<label for="inputHidden">
	Hidden:
	<input type="hidden" name="inputHidden" />
</label>
						

Input

Botones

<label for="inputSubmit">
	<input type="submit" name="inputSubmit" value="Enviar" />
</label>

<label for="inputReset">
	<input type="reset" name="inputReset" />
</label>

<label for="inputButton">
	<input type="button" name="inputButton" value="Acción" />
</label>

<label for="inputImage">
	<input type="image" name="inputImage" src="URL" />
</label>

<label for="inputFile">
	Archivo:
	<input type="file" name="inputFile" />
</label>