Etiqueta de formulario
Las funciones de inicio de sesión y registro que usamos a menudo en el sitio web están escritas en un formulario, como se muestra en la siguiente figura:
En general, un formulario consta de tres partes:
① Campo de formulario: El campo de formulario es equivalente a un control, que se utiliza para contener toda la parte del formulario. Si no hay un campo de formulario, los datos del formulario no pueden interactuar con el servidor de fondo.
② Controles de formulario: los controles se refieren a varios elementos funcionales del formulario, como cuadros de entrada de texto, cuadros de entrada de contraseña, casillas de verificación, botones de envío, botones de reinicio, etc.
③ Información de solicitud: se refiere a algunas descripciones de texto de solicitud, que son convenientes para que las utilicen los usuarios.
Para el formulario de la figura anterior, lo dividimos en 3 partes, como se muestra en la figura siguiente:
Veamos algunos controles de formulario de uso común.
El control de entrada está representado
por una <input />etiqueta. Es una sola etiqueta. La etiqueta de entrada tiene muchos atributos, como se muestra en la siguiente figura:
El más importante es el atributo type, que se usa para especificar diferentes tipos de control. Vamos a verlos uno por uno. Hay comentarios en el código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单input 控件演示</title>
</head>
<!-- type=text 这是一个文本框
size 属性是文本框的长度
value 是文本框中的默认值 -->
用户名：<input type="text" size="20" value="abc" /> <br /> <br />
<!-- type=password 这是一个密码框
maxlength 是文本框中能输入的字符的最大长度-->
密 码：<input type="password" size="21" value="123" maxlength="6" /> <br /> <br />
<!-- input 控件的下面这种写法实际上两组控件，
这种情况下男女两个选框可以同时选择，这一般不是我们想要的效果 -->
性别1：<input type="radio" /> 男
<input type="radio" /> 女 <br /> <br />
<!-- 为了使得男女两个选框只能选择其中一个，我们需要将这两个input 控件变成一组控件，可以使用name 属性。
如下面这种写法，下面的两个input 控件的name 属性的值都是 sex，
这时这两个控件就是同一组控件，男女两个选框就只能选择一个 -->
性别2：<input type="radio" name="sex" checked /> 男 <!-- checked 属性表示默认选中的组件，这里默认选中“男” -->
<input type="radio" name="sex" /> 女 <br /> <br />
<!-- type=checkbox 是复选框，可以同时选择多个 -->
爱 好：<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 踢球 <br /> <br />
<!-- type=button 是一个搜索按钮，可以用鼠标点击
value 是按钮上显示的文字-->
这是一个搜索按钮：<input type="button" value="我是搜索按钮" /> <br /> <br />
<!-- type=submit 是一个提交按钮，可以用鼠标点击 -->
这是一个提交按钮：<input type="submit" value="我是提交按钮" /> <br /> <br />
<!-- type=reset 是一个重置按钮，可以用鼠标点击 -->
这是一个重置按钮：<input type="reset" value="我是重置按钮" /> <br /> <br />
<!-- type=image 是一个图片按钮，可以用鼠标点击，用src 属性设置图片的地址 -->
这是一个图片按钮：<input type="image" src="https://www.baidu.com/img/baidu_jgylogo3.gif" /> <br /> <br />
<!-- type=file 用于上传文件 -->
这个用于上传文件：<input type="file" /> <br />
</body>
</html>
Las siguientes imágenes corresponden al código y al efecto, que parece más conveniente:
etiqueta etiqueta
etiqueta etiqueta generalmente se usa junto con la etiqueta de entrada, puede desempeñar un papel, cuando hace clic en el texto junto a un cuadro de entrada, puede también haga clic en la entrada de entrada Como el cuadro, bloquee el cuadro de entrada. El siguiente es un ejemplo para ilustrar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lable 标签演示</title>
</head>
<!-- 用label 标签将文字说明和input 标签都包住，这时，
当点击“用户名” 三个字时也就相当于点击了input 框 -->
<label>
用户名：<input type="text" />
</label>
<br />
<!-- 可以通过label 标签中的for 属性，与input 标签中的id 属性配合使用，
来将label 标签与 input 标签绑定起来，下面代码的效果与上面的效果是一样的 -->
<label for="aname">
用户名：<input type="text" id="aname" />
</label>
</body>
</html>
El efecto es el siguiente:
textarea control
textarea control es un campo de texto, como se muestra en la siguiente figura, puede ingresar varias líneas de texto:
Demostremos brevemente a través del siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea 标签演示</title>
</head>
<body>
这是一个留言板：
<textarea>输入留言</textarea>
</body>
</html>
El efecto es el siguiente
Menú
desplegable El menú desplegable está <select></select>representado por una etiqueta y su formato de sintaxis es el siguiente:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
下面通过代码举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单演示</title>
</head>
<body>
你在北京哪个区：
<select>
<option>选择所在北京的区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option selected>昌平区</option> <!-- 可以通过select 属性来选择默认的显示 -->
<option>大兴区</option>
<option>通州区</option>
</select>
</body>
</html>
El efecto es el siguiente:
Campo de formulario El campo de
formulario está representado por la etiqueta de formulario, que controla el alcance de un formulario. Cada formulario debe colocarse en el campo de formulario. Las etiquetas de formulario envueltas en la etiqueta de formulario se pueden enviar al fondo. Todas las etiquetas de formulario de las que hablamos anteriormente pueden colocarse en la etiqueta de formulario y enviarse al servidor backend.
El formato de sintaxis de la etiqueta de formulario es el siguiente:
<body>
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
</body>
Los atributos de uso común de la etiqueta de formulario son los atributos de acción, método y nombre, que se describen en secuencia a continuación:
① acción: se utiliza para especificar la dirección URL a la que se envía la información del formulario.
② método: se utiliza para especificar el método de envío de datos del formulario, existen dos tipos de obtención y publicación.
③ nombre: se utiliza para especificar el nombre del formulario para distinguir diferentes formularios en la misma página.