El conocimiento básico de front-end (c), la forma Formas

cuadro de búsqueda Baidu analógico

<form action="search.jsp">
<!-- action：提交表单时向何处发送表单中的数据,一般可用#代替 -->
		<input type="text" name="search">
		<!-- type：数据类型，name;会把提交的数据赋给name里面的值然后提交给后台 -->
		<input type="submit" value="百度一下">
		<!-- 类型是submit就是提交的意思 -->
</form>

Método caja de la conexión analógica (GET, POST)

<form action="#" method="post">
		<!-- 表单提交方式有两种，当没写这个标签时默认为get
			get:将数据作为URL的一部分送给服务器，URL由地址部分和数据部分构成，以"?"隔开。数据以"名称=值"得方式成对出现数据之间通过"&"隔开
			post:将数据隐藏在HTTP的数据流中进行传输，请求数据不会出现在地址栏中，安全性比get方式高，且对数据长度没有限制。
		 -->
		<table>
			<tr>
				<td><input type="text" name="user"></td>
			</tr>
			<tr>
				<td><input type="password" name="pwd"></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="again" id="">
                下次自动登录
				</td>
			</tr>
			<tr>
				<td><input type="submit" value="登陆"></td>
			</tr>
		</table>
	</form>

Cuando el método de presentación es obtener:

cuando el método presentado de una manera que es más seguro para el puesto :()

atributo enctype

Antes de enviar los datos del formulario, a través de la codificación de datos de atributos enctype en la forma descrita
tres modo de codificación: application / x-www-form -urlencoded, multipart / form-data, text / plain

application / x-www-form-urlencoded codificación predeterminada

La mayoría de las formas utilizarán este método de codificación, antes de que el servidor, todos los caracteres serán codificados en Unicode envío de datos, y una manipulación especial de ciertos caracteres, espacios, reemplazar el signo +, y la otra se convierte en el formato ASCII correspondiente (es decir, "% XX "formato, XX representa los dígitos hexadecimales ASCII)

multipart / form-data

A menudo se utiliza cuando el formulario contiene el control de carga de archivos, que es el camino equivocado para codificar caracteres

<form action="#" enctype="multipart/form-data">
		<!-- 如果表单中有file类型的数据，则必须加上这个标签 -->
		<table>
			<tr>
				<td><input type="file" name="file" id=""></td>
			</tr>
		</table>
</form>	

Texto sin formato

Se convertirá los espacios + encuentros, no hay otros caracteres especiales se codifican

Los campos del formulario

Los campos de formulario incluyen un cuadro de texto, cuadro de contraseña, campos ocultos, cuadros de texto de múltiples líneas, botones de radio, casillas de verificación, cuadros de lista, y seleccione la casilla de selección de archivos y otros elementos. Además de cuadro de texto de varias líneas y selección del cuadro de lista, la mayoría de los campos de formulario que utilizan etiquetas para crear
atributos: id (del control de corriente única de identificación, diseño de interfaces, CSS, JavaScript puede ser utilizado)
nombre (el nombre del control de corriente para enviar los datos al servidor cuando, nombre adquirido un valor) correspondiente
valor (campos de formulario) valor inicial
de tipo (tipo de control, texto, contraseña, radio, casillas de verificación , archivo, oculto, botón, enviar, reinicio, imagen , etc.)
MAXLENGTH (texto de entrada Cuadro un número máximo de caracteres)
tamaño (ancho del control de entrada de texto)

maxlength 和 tamaño

valor

<tr>
	<td><input type="text" name="user" value="请输入用户名"></td>
</tr>

marcador de posición

h5 en el nuevo atributo marcador de posición

<tr>
	<td><input type="text" name="user" placeholder="请输入用户名"></td>
</tr>

sólo lectura 和 diasbled

<td><input type="text" name="user" placeholder="请输入用户名" readonly="readonly" >
<!-- readonly:只可读不可更改，颜色不变，disabled： 颜色变成灰色，也不可更改，光标都不可能在那停留-->
</td>

Radio botón de opción

性别：<input type="radio" name="sex" value="man" id="" checked="checked"/>男
<input type="radio" name="sex" value="woman" id=""/>女<br>
<!-- 单选按钮根据name属性将其分为几组，每组只有一个选项，name必须相同才是单选
提交的值是value里面的值 ，所以这里value值必须有-->
专业：<input type="radio" name="major" value="computer" id=""/>计算机
<input type="radio" name="major" value="physics" id="" checked="" />物理
<!-- checked两种表达方式都行，代表默认被点中 -->
<input type="radio" name="major" value="chemical" id=""/>化工

casilla de verificación casilla de verificación

爱好<input type="checkbox" name="hobby" id="" value="music" checked=""/>音乐
<!-- type为checkbox代表复选框 name相同的为一组允许多选-->
<input type="checkbox" name="hobby" id="" value="swimming" checked=""/>游泳
<input type="checkbox" name="hobby" id="" value="football" />足球
<input type="checkbox" name="hobby" id="" value="dance" />跳舞

Campo oculto escondido

Disponible cuando un usuario no tiene que ver, pero necesidad de pasar el fondo de datos

Varias líneas de texto área de texto

<tr>
	<td><textarea name="评论" id="" cols="30" rows="10"></textarea></td>
</tr>

cuadro de selección de la lista

Seleccione

请选择国家：<select name="country" id="">
		<option value="China">中国</option>
		<option value="US">美国</option>
		<option value="English">英国</option>
		<!-- value里面的值才是传给后台的 -->
	    </select>
	    <br>
		<input type="submit" value="提交">

OPTGROUP

请选择日期：<select name="day" id="" >
				<optgroup label="--工作日--">
					<option value="monday">星期一</option>
				    <option value="tuesday">星期二</option>
				    <option value="wednesday">星期三</option>
				</optgroup>
				<optgroup label="--休息日--">
					<option value="saturday">星期六</option>
				    <option value="sunday">星期天</option>
				</optgroup>
			</select>
			<br>
			<input type="submit" value="提交">

Control Sumbit botón de reinicio, el botón, la imagen

<input type="text" name="user" id="">
<input type="submit" value="提交">
<!-- sumbit提交表单 -->
<input type="reset" value="重置">
<!-- reset重置标签 -->
<input type="button" value="按钮">
<!-- 表示一个普通按钮，当用户点击按钮时，可以触发JavaScript脚本的按钮 -->
<input type="image" src="images/huidingbu.png" alt="">
<!-- image表示图片按钮，点击图片可提交表单 -->

Formar agrupación de campos

 <fieldset>
    <legend>请选择个人爱好</legend>
	<input type="checkbox" name="hobby" id="" value="music" checked=""/>音乐
    <input type="checkbox" name="hobby" id="" value="swimming" checked=""/>游泳
	<input type="checkbox" name="hobby" id="" value="football" />足球
	<input type="checkbox" name="hobby" id="" value="dance" />跳舞
</fieldset>
<fieldset>
	<legend>请选择个人爱好</legend>
	<input type="checkbox" name="hobby" id="" value="music" checked=""/>音乐
	<input type="checkbox" name="hobby" id="" value="swimming" checked=""/>游泳
	<input type="checkbox" name="hobby" id="" value="football" />足球
	<input type="checkbox" name="hobby" id="" value="dance" />跳舞
</fieldset>

resumen