Directorio de artículos
En HTML, un formulario completo generalmente consta de tres partes: campos de formulario, controles de formulario (también llamados elementos de formulario) e información de solicitud. Escenario de uso: envíe los elementos del formulario en el área al servidor backend
1. Campos de formulario
<form action="url" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
1.1 Atributos comunes:
| Atributos | Valor de atributo | efecto |
|---|---|---|
| acción | dirección url | Se utiliza para especificar la dirección del programa servidor que recibe y procesa los datos del formulario. |
| método | obtener / publicar | Establecer el método de envío de datos del formulario |
| nombre | nombre | Especifique el nombre del formulario para distinguir varios campos de formulario en la misma página |
2. Controles de formulario (elementos de formulario)
Se pueden definir varios elementos de formulario en el campo de formulario Estos elementos de formulario son controles de contenido que permiten a los usuarios ingresar o seleccionar en el formulario.
A continuación te explicamos:
- elemento de formulario de entrada
- seleccionar elemento de formulario desplegable
- elemento de área de texto textarea
2.1 elementos de formulario de entrada de entrada
(1) Cuadro de contraseña de texto con atributo de tipo
En la <input>etiqueta, contiene una typepropiedad, dependiendo del typevalor del atributo, el campo de entrada tiene una amplia variedad de formas (ya sea campos de texto, casillas de verificación, control de texto después de la máscara, botones de radio, botones, etc. ).
<input type="属性值" />
- Etiqueta única
- El atributo de tipo establece diferentes valores de atributo para especificar diferentes tipos de control.
El valor de atributo del atributo de tipo y su descripción son los siguientes: Por
ejemplo:
<form>
账号：<input type="text" />
<br/>
密码：<input type="password"/>
</form>
(2) Darse cuenta de los botones de radio y las casillas de verificación
Además del atributo de tipo, la etiqueta tiene muchos otros atributos. Los atributos más utilizados son los siguientes:
- El nombre y el valor son los valores de atributo de cada elemento del formulario, que son utilizados principalmente por el personal de back-end .
- nombre El nombre del elemento del formulario, el botón de opción y la casilla de verificación deben tener el mismo valor de nombre .
- Verificamos la propiedad principalmente para los botones de radio y las casillas de verificación, un papel importante en la apertura de una página será la opción predeterminada de un elemento de formulario.
- maxlength es el número máximo de caracteres que el usuario puede ingresar en el elemento del formulario y rara vez se usa.
<form>
账号：<input type="text" value="123456"> <br>
密码：<input type="password" value="123456"> <br>
<!-- 用radio属性实现单选，name属性值相同 -->
性别：男<input type="radio" name="1" value="男"> 女<input type="radio" name="1" value="女"> <br>
<!-- 用checkbox属性实现单选 -->
喜好：吃饭<input type="checkbox" name="eat" value="吃饭"> 睡觉<input type="checkbox" name="sleep" value="睡觉">
</form>
(3) botones de enviar y restablecer
<form action="xxx.php" method="post">
<!--内容会提交给后台-->
<input type="submit" value="注册">
<input type="reset">
</form>
(4) etiqueta
<label>La etiqueta define la etiqueta (etiqueta) para el elemento de entrada.
<label>La etiqueta se usa para vincular un elemento de formulario, haga clic en el <label>texto dentro de la etiqueta, el navegador se enfocará automáticamente (cursor) para seleccionar o formar los elementos correspondientes utilizados para aumentar la experiencia del usuario. La
<label>etiqueta for 属性debe estar asociada con el elemento. id 属性La misma .
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
2.2 Seleccionar elemento de formulario desplegable
Escenario de uso: en la página, si hay varias opciones para que el usuario elija, y queremos ahorrar espacio en la página, podemos usar el <select>control de etiqueta para definir una lista desplegable.
<select>Contiene al menos un par<option>.- Cuando se
<option>defineselected =“ selected "en, el elemento actual es el elemento seleccionado por defecto .
<form>
籍贯：
<select>
<option select="selected">请选择</option>
<option>湖北</option>
<option>湖南</option>
<option>新疆</option>
</select>
</form>
2.3 elemento de área de texto textarea
Escenarios de uso: cuando el usuario ingresa más cosas, no podemos usar el cuadro de texto para el formulario, y luego podemos usar <textarea>etiquetas.
En los elementos de formulario, las <textarea>etiquetas son controles que se utilizan para definir la entrada de texto de varias líneas.
Utilice el control de entrada de texto de varias líneas para introducir más texto. Este control es común en los foros de mensajes y comentarios.
<textarea rows="3" cols="20">
文本内容
</textarea>
- Por
<textarea>puede crear fácilmente varias líneas etiqueta de la caja de entrada de texto. - cols = "el número de caracteres en cada fila", rows = "el número de filas mostradas", no lo usaremos en el desarrollo real , usamos CSS para cambiar el tamaño .
3. Ejemplos de aplicaciones a gran escala
Escribe un
código como este :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的诗词</title>
</head>
<body>
<h2>青春不常在，抓紧谈恋爱</h2>
<table width="600">
<!-- 性别 -->
<tr>
<td>性别</td>
<td>
<input type="radio" id="男" name="性别" value="男">
<label for="男"><img alt="男" src="男.png"6 width="16" height="16">男 </label>
<input type="radio" id="女" name="性别" value="女">
<label for="女"><img alt="女" src="女.png"6 width="16" height="16">女 </label><br>
</td>
</tr>
<!-- 生日-->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>2000</option>
<option>2001</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<!-- 所在地区 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 婚宴状况 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="婚姻" id="1"><label for="1">未婚</label>
<input type="radio" name="婚姻" id="2"><label for="2">已婚</label>
<input type="radio" name="婚姻" id="3"><label for="3">离婚</label>
</td>
</tr>
<!-- 学历 -->
<tr>
<td>学历</td>
<td><input type="text" value="幼儿园"></td>
</tr>
<!-- 喜欢的类型 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox">可爱的
<input type="checkbox">小鲜肉
<input type="checkbox">都喜欢
</td>
</tr>
<!-- 自我介绍 -->
<tr>
<td>自我介绍</td>
<td>
<textarea rows="3" cols="20">
自我介绍
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="www.baidu.com">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Comparado:
