Una lista completa de atributos de formularios y tablas de uso común.

Una lectura obligada para conocer los conceptos básicos de HTML: comenzar con HTML, la programación es muy simple

1. formulario de formulario

El formulario es principalmente para información del usuario, recopila datos, envía la información ingresada por el usuario al servidor y luego la devuelve a la interfaz de inicio de sesión.

1.1 etiqueta de formulario de formulario

Se utiliza para marcar un formulario y almacenar datos del mismo.Formato
de sintaxis:
<form action="" method="" name="" target="">表单内容</form>

Algunos atributos de las etiquetas de formulario:

• campo de formulario
• acción: indica la dirección de envío
• nombre: nombre del formulario
• destino: donde se abrirá la nueva página después de enviar el formulario. Se mencionó en el enlace anterior un

1.2 etiqueta de control del formulario de entrada de entrada

• La entrada es un elemento en línea, por lo que se puede mostrar en una línea. Al mismo tiempo, la entrada es un elemento de reemplazo, por lo que admite atributos de ancho y alto. (En el Capítulo 5 anterior: 2. Se mencionaron elementos en línea. img y input son elementos en línea y elementos de reemplazo)

Formato:<input type="输入控件类型" >

Algunas propiedades de los controles del formulario de entrada:

• marcador de posición: le solicita lo que desea ingresar
• valor: representa el contenido de entrada predeterminado en el control
• deshabilitado: deshabilita la selección del contenido seleccionado
• marcado: se utiliza para selección única y selección múltiple para indicar que está marcado de forma predeterminada

1.2.1 cuadro de texto de texto

Formato:<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">

• nombre: el nombre del cuadro de texto, se puede repetir
• id: También es el nombre del cuadro de texto y no se puede repetir.
• marcador de posición: le solicita lo que desea ingresar
• valor: representa el contenido de entrada predeterminado en el control
• tamaño: ancho del cuadro de texto
• maxlength: el número máximo de caracteres ingresados ​​en el cuadro de texto
• minlength: el número mínimo de caracteres ingresados ​​en el cuadro de texto

1.2.2 cuadro de contraseña de contraseña

Formato: <input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">
el cuadro de contraseña tiene las mismas propiedades y formato que el cuadro de texto, excepto que el contenido ingresado en el cuadro de contraseña será reemplazado por un pequeño punto negro.

1.2.3 botón de opción

Formato:<input type="radio" name="" checked vaule><label for="">单选项的名称</label>

• nombre: el nombre del botón de opción. Nota: Los nombres de cada grupo de opciones de opción en el mismo grupo de cuadros de botones de opción deben ser los mismos.
• marcado: Indica que el contenido seleccionado está marcado de forma predeterminada
• deshabilitado: deshabilita la selección del contenido seleccionado.
• vaule: el valor predeterminado del botón de opción (el valor pasado al enviar datos al servidor)
• <label></label>Etiqueta: Etiqueta de entrada auxiliar para selección

1.2.4 casilla de verificación cuadro de selección múltiple

Formato:<input type="checkbox" name="" checked vaule><label for="">当前选项的名称</label>

• nombre: el nombre del botón de opción. Nota: Los nombres de cada grupo de opciones individuales en el mismo grupo de casillas de verificación deben ser consistentes.
• marcado: Indica que el contenido seleccionado está marcado de forma predeterminada
• deshabilitado: deshabilita la selección del contenido seleccionado.
• vaule: el valor predeterminado de la casilla de verificación (el valor pasado al enviar datos al servidor)
• <label></label>Etiqueta: Etiqueta de entrada auxiliar para selección

<form action="">
        账号：<input type="text" name="username" placeholder="请输入账号" value="123456"><br>
        <!-- 因为input是行内元素，不会自动换行，所以我们加上一个换行符 -->
        密码：<input type="password" name="password" placeholder="请输入密码" value="123456">
         <form action="">
        性别：
        <input type="radio" name="sex" checked><label for="boy">男孩</label>
        <!-- 男孩里面加上了checked 表示默认勾选男孩 -->
        <input type="radio" name="sex"><label for="girl">女孩</label>
        <br>

        喜欢的科目：
        <input type="checkbox" name="subject" checked><label for="Chinese">语文</label>
        <!-- 语文里面加上了checked 表示默认勾选语文 -->
        <input type="checkbox" name="subject"><label for="math">数学</label>
        <input type="checkbox" name="subject"><label for="English">英语</label>
        <input type="checkbox" name="subject"><label for="physical">物理</label>
        <input type="checkbox" name="subject" checked><label for="history">历史</label>
        <!-- 历史里面加上了checked 表示默认勾选历史 -->

        <input type="reset" value="重新选择">
        <!-- 默认值就是重置，此处通过value改变预设值 -->
    </form>

1.2.5 Botón normal Botón de envío Botón de reinicio

• botón: botones ordinarios (los botones ordinarios se pueden vincular a scripts a través de js para completar algunas operaciones y luego combinarse con js posteriores) combinados con js como:<input type="button" value="给关闭" oncClick="WinClose()">

• enviar: botón Enviar, que puede activar la acción de envío del formulario (combinado con los siguientes js, como la implementación de algunas funciones de registro e inicio de sesión)

• restablecer: botón Restablecer para restaurar el formulario a la página original

  Los tres tipos de botones pueden especificar el contenido del texto que se muestra en el botón a través del atributo de valor.

1.2.6 botón de envío de imagen

Formato:<input type="image" src="作为图像按钮的图片路径"> -->

<form action="">
        <input type="button" value="我是普通按钮">
        <br>
        <input type="submit" value="我是提交按钮">
        <input type="reset" value="我是重置按钮">

        <!-- 使用图片作为提交1按钮的样式 -->
        <input type="image" src="./img/2.jpg" width="30px" height="30px">
    </form>

Representación:

1.2.7 Nuevas características de css3

<form action="">
        <!-- 7.文件上传框file -->
        <!-- css3新特性 -->
          <!-- 文件上传  -->
          <input type="file"><br>   
           

          <!-- 日期选择框 -->
          请选择日期：<input type="date"><br>

          <!-- 时间 -->
          请选择时间：<input type="time"><br>
          
          <!-- 数字输入框  只能输入数字 字母e是特殊数字 -->
          请输入数字：<input type="number" placeholder="只能输入数字,字母e是特殊数字"><br>

          请滑动滑块验证：<!-- 数字滑块 -->
          <input type="range"><br>
          
          <!-- 颜色 -->
          请选择颜色：<input type="color"><br>
          
          <!-- 电子邮件 -->
          请输入电子邮件：<input type="email" placeholder="请输入电子邮件"><br>
    </form>

Representación:

2El ：focusformulario se selecciona cuando se enfoca.

Cuando el mouse hace clic en el cuadro de entrada del control del formulario, el cuadro de entrada externo se puede mostrar a través del estilo modificado por CSS.
Sólo tendrá efecto cuando se utilice en etiquetas de formulario.

这段样式加入rest（1）.css外部样式里，引入就行 
       /* 清除默认焦点边框 */
        button,input{
            outline: none;
        }

Formato:

selector ：focus{/ escribir estilo /}

<style>
        /* 这段加入rest（1）.css外部样式里，引入就行 */
       /* 清除默认焦点边框 */
        button,input{
      
      
            outline: none;
        }

        .text{
      
      
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
        /* 点击表单控件    获取焦点选中
        鼠标点击表单控件输入框时，外面的输入框可通过css修改的样式显示
        */
        .text:focus{
      
      
            border: 1px solid green;
        }

    </style>
</head>
<body>
    账号：<input type="text" name="username" class="text" placeholder="请输入账号">
    <br>
    密码：<input type="password" name="password" class="text" placeholder="请输入账号">

Representación: cuando el mouse hace clic en el cuadro de control de entrada, el color del cuadro de control cambiará al color cambiado en el estilo.

2. Seleccione el menú desplegable

• select es un elemento contenedor que marca un menú o lista desplegable. Contiene elementos de opción que marcan cada elemento en un menú o lista desplegable.
• Cuando seleccionar utiliza el atributo múltiple, el usuario puede seleccionar varios elementos en la lista al mismo tiempo.
• El atributo seleccionado de la etiqueta de opción especifica que el elemento está seleccionado. De forma predeterminada, se selecciona el primer elemento.
• El atributo deshabilitado de la etiqueta de opción especifica que el artículo no está disponible

<label for="season">请选择最喜欢的季节</label>
    <select name="" id="">
        <option value="red">春天</option>
        <option value="green">夏天</option>
        <option value="blue" selected>秋天</option>
        <!-- option标记的selected属性指定该项被选取，默认是第一项被选取 -->
        <option value="white" disabled>冬天</option>
        <!-- option标记的disabled属性指定该项不可用 -->
    </select>

Representación:

3. cuadro de texto de entrada de varias líneas de área de texto

Generalmente se utiliza para cuadros de texto de entrada de varias líneas, como comentarios en la parte inferior de las páginas web
. Formato:<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>

• área de texto: elemento de cuadro de texto retráctil
• cols: número de caracteres en cada línea
• filas: muestra el número de filas
• marcador de posición: le solicita lo que desea ingresar
• solo lectura: configura el área de texto de varias líneas como de solo lectura y no se puede editar ni modificar.

<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>

Representación: haga clic con el mouse en la esquina inferior derecha para cambiar el tamaño del cuadro de texto.

4. Formulario

• tabla: etiqueta de tabla, la etiqueta de tabla representa una tabla
• tr: Hay tantas filas como tr en la fila.
• td: celda, una fila consta de varias celdas td
• th: el encabezado se usa generalmente para la primera fila o columna de la tabla
• título: título de la tabla

<style>
        table {
      
      
            width: 300px;
            height: 50px;
            border: 1px solid red;
        }

        th,
        tr,
        td {
      
      
            width: 100px;
            height: 50px;
            border: 1px solid pink;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 定义表格 -->
    <table>
        <!-- 表格里面的一行 -->
        <tr>
            <!-- 表示单元格 -->
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>18岁</td>
            <td>456</td>
        </tr>

    </table>

    <!-- 
         table  定义表格标签
         caption: 定义表格标题
         tbody: 表格内容  不写也会自动生成
         th:表头标签
         tr:表格一行   
         td:表示表格里一个单元格   必须嵌套在 tr中标签

        thead：代表表格头部
        tbody: 表格内容  不写也会自动生成
        tfoot：代表表格尾部
            
        
     -->

    <table>
        <!-- 定义这个表格标题 -->
        <caption>老师调查表</caption>
        <tr>
            <!-- 表头 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>性别</th>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>小春</td>
            <td>18岁</td>
            <td>写代码</td>
            <td>男</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>无限</td>
            <td>19岁</td>
            <td>喜欢漂亮小姐姐</td>
            <td>男</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>夏栀老师</td>
            <td>19岁</td>
            <td>爱吃小龙虾 螃蟹</td>
            <td>女</td>
        </tr>
    </table>

Representación:

combinación de celdas de tabla: fórmula
de combinación de celdas : número de celdas combinadas - 1 = número de celdas eliminadas

  rowspan: 跨行合并   合并顺序是从上往下  合并的
  
  colspan: 跨列合并  先左后右

<style>
        table{
      
      
            width: 900px;
            border: 1px solid red;
            margin: 30px auto;
            /* 表格  单边框样式 */
            border-collapse: collapse;
        }
        tr,td,th{
      
      
            width: 350px;
            height: 60px;
            border: 1px solid #096;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 合并单元格  难点 -->
    <table >
        <!-- 表格标题 -->
        <caption>征婚表</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>征婚条件</th>
        </tr>
        <tr>
            <td>黄黄</td>
            <td>男</td>
            <td rowspan="3">21岁</td>
            <!-- 这是跨行合并， 此处td rowspan="3"，后面删除两个第三列的td即可-->
            <td>21岁-29岁 特征:美女</td>
        </tr>
        <tr>
            <td>文文</td>
            <td rowspan="2">女</td>
            <!-- <td>21岁</td> -->
            <td>22岁-28岁 特征:有钱</td>
        </tr>
        <tr>
            <td>水水</td>
            <!-- <td>女</td> -->
            <!-- <td>21岁</td> -->
            <td>22岁-28岁 特征:有钱</td>
        </tr>
        <tr>
            <td>西西</td>
            <td>男</td>
            <td>22岁</td>
            <td>21岁-30岁 特征:有钱 美女</td>
        </tr>
        <tr>
            <td>南南</td>
            <td>男</td>
            <td>22岁</td>
            <td>21岁-30岁 特征:有钱 美女 黑丝</td>
        </tr>

        <tr>
            <!-- 这是跨列合并， 此处td colspan="4"，后面删除本行里的3个td即可-->
            <td colspan="4">都喜欢漂亮的小姐姐</td>
            <!-- <td>都喜欢漂亮的小姐姐</td>
            <td>都喜欢漂亮的小姐姐</td>
            <td>都喜欢漂亮的小姐姐</td> -->
        </tr>
    </table>
    <!-- 
       合并单元格   
         公式:  合并单元格个数(2) - 1 = 删除个数 2

      rowspan: 跨行合并   合并顺序是从上往下  合并的
      
      colspan: 跨列合并  先左后右-->

Representación:

Resumir

Lo anterior es el formulario compilado por el editor para todos, así como algunos tipos de controles de formulario de entrada, también agrega menús desplegables y cuadros de entrada de texto de varias líneas, finalmente, también habla sobre tablas, combinación de celdas de tablas. , etc.combinado con casos relacionados Una explicación más detallada. Fue compilado con referencia a varias fuentes y a mi propio entendimiento. Si puede haber inexactitudes u omisiones, espero que puedan iluminarme y hacer correcciones. Me gustaría agradecerles de antemano.