etiquetas de formularios y controles de formulario

Definiciones forma de etiqueta y el uso

En HTML, las etiquetas se crean utilizando el formulario HTML para la entrada del usuario, son comunes en la página web, tales como: registro y páginas de inicio de sesión es el uso de la forma de lograr.

Generalmente formar un control completo por la forma (también conocido como elementos de formulario), lo que sugiere que tres partes que constituyen los campos de información y la forma.
Aquí Insertar imagen Descripción
Etiquetas suelen tener una gran cantidad de forma sub-elementos, que se utiliza para definir una variedad de controles interactivos (campos de texto, casillas de verificación, botones de opción, botones de envío, etc.), como <input>, <botón>, <select>, <textarea > y otras etiquetas.

Los controles de formulario:

Contiene los elementos funcionales forma real, tales como la caja de una sola línea de entrada de texto, el cuadro de introducción de la contraseña, casilla de verificación, botón, botón de reinicio y el Presentar similares.

mensaje:

Una forma en general tienen que incluir un texto descriptivo, y pide al usuario que la operación de llenado.

Los campos del formulario:
atributos comunes:

  1. Acción
    cuando la información de forma se recoge, las necesidades de información que se pasa al servidor para su procesamiento, atributo de acción especifica la dirección del servidor para recibir y datos de formularios url programa de proceso.
  2. método de
    enviar datos de formulario para establecer una manera de obtener su valor o por correo.
  3. Nombre
    especifica el nombre del formulario, para distinguir múltiples formas de la misma página.

Nota: Cada forma debe tener sus propios campos de formulario.

<form action="提交地址" method="提交方式">
表单内容
</form>

Él actúa como un contenedor para la recepción de todos los controles de mensajes y la forma, el método puede ser enviado al servidor por sus direcciones URL programa de procesamiento de definición del formulario de datos, y los datos. Si no se definen los campos del formulario, los datos del formulario no se pueden transferir al servidor de fondo.

controles de entrada

etiquetas de entrada para una sola etiqueta, el tipo de los atributos de su atributo más básico, cuyo valor variedad, que se utiliza para diferentes tipos de control especificado. Además del tipo de atributo, puede definirse de muchas otras cualidades que las propiedades comunes se muestran en la siguiente tabla.
Tipo describe la forma de los
Aquí Insertar imagen Descripción
radio si se trata de un grupo, hay que darles el mismo nombre nombre nombre, así que se puede lograr más de un ellos seleccionados.

etiqueta etiqueta

etiquetas de la etiqueta para el elemento de entrada define la etiqueta (tag).
tabla de acciones: elemento se utiliza para enlazar un formulario, haga clic en la etiqueta cuando la etiqueta, los elementos de forma unida obtendrá el foco de entrada.

Cómo enlazar elementos?

para atributo especifica la etiqueta con la que la unión de elemento de formulario.

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

control de área de texto (campo de texto)

cuadro de texto de texto sólo puede escribir una línea de texto que
textarea campo de texto
si es necesario introducir una gran cantidad de información, es necesario utilizar etiqueta <textarea> <textarea />. Usted puede crear fácilmente múltiples líneas de control de la caja de entrada de texto área de texto por su sintaxis básica es la siguiente:

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

Menú desplegable

Definido menú desplegable con los controles de selección

<select>
  <option selected =" selected ">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

nota:

  1. <Seleccionar> </ select> debe contener al menos un par de <option> </ option>.
  2. Cuando se define una selected = "selected" en la opción, el elemento seleccionado es el elemento predeterminado.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="#" type="text/CSS">
    <title>表单</title>
</head>
<body>
    <table height="700" width="600" align="center" border="0" cellspacing="0" cellpadding=
    "0">
        <caption><h2>账号注册界面</h2></caption>
            <tbody>
                <form action="url地址" method="提交方式" name="表单名称">
                <tr>
                    <td>性别</td>
                    <td><input type="radio" checked="checked" name="sex"><input type="radio" name="sex">
                    </td>
                </tr>
                <tr>
                    <td>生日</td>
                    <td>
                        <select>
                            <option value="">请选择年</option>
                            <option value="">1995</option>
                            <option value="">1996</option>
                            <option value="">1997</option>
                            <option value="">1998</option>
                            <option value="">1999</option>
                            <option value="">2005</option>
                            <option value="">2006</option>
                            <option value="">2007</option>
                            <option value="">2008</option>
                            <option value="">2009</option>
                            <option value="">2010</option>
                            <option value="">2011</option>
                        </select>   
                        <select>
                            <option value="">请选择月</option>
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                            <option value="">4</option>
                            <option value="">5</option>
                            <option value="">6</option>
                            <option value="">7</option>
                            <option value="">8</option>
                            <option value="">9</option>
                            <option value="">10</option>
                            <option value="">11</option>
                            <option value="">12</option>
                        </select>  
                        <select>
                            <option value="">请选择日</option>
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                            <option value="">4</option>
                            <option value="">5</option>
                            <option value="">6</option>
                            <option value="">7</option>
                            <option value="">8</option>
                            <option value="">9</option>
                            <option value="">10</option>
                            <option value="">11</option>
                            <option value="">12</option>
                            <option value="">13</option>
                            <option value="">14</option>
                            <option value="">15</option>
                        </select>        
                    </td>
                </tr>
                <tr>
                    <td>所在地区</td>
                    <td>
                        <select name="" id="">
                            <option value="">北京</option>
                            <option value="">上海</option>
                            <option value="">天津</option>
                            <option value="">石家庄</option>
                            <option value="">河南</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>婚姻状况</td>
                    <td>
                        未婚<input type="radio" name="marriage" checked="checked">
                        离婚<input type="radio" name="marriage">
                        丧偶<input type="radio" name="marriage">
                    </td>
                </tr>
                <tr>
                    <td>学历</td>
                    <td>
                        <input type="text" value="小学">
                    </td>
                </tr>
                <tr>
                    <td>月薪</td>
                    <td>
                        <input type="text" value="5000-8000">
                    </td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>
                        <input type="text" maxlength="11" value="">
                    </td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td>
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td>喜欢的类型</td>
                    <td>
                        可爱<input type="checkbox" name="love">
                        御姐<input type="checkbox" name="love">
                        温柔<input type="checkbox" name="love">
                        贤惠<input type="checkbox" name="love">
                        辣妹<input type="checkbox" name="love">
                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td>
                    <td>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="text" value="请输入验证码">
                        <input type="reset" value="刷新">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="image" src="image/btn.png">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox">
                        <strong>我同意注册条款和会员加入标准</strong>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <a href="#"><p>我有账号,立即登录</p></a>
                    </td>
                </tr>
            </form>
            </tbody>
    </table>
</body>
</html>

Aquí Insertar imagen Descripción

Publicado 23 artículos originales · ganado elogios 0 · Vistas 190

Supongo que te gusta

Origin blog.csdn.net/CCT912097957/article/details/105271890
Recomendado
Clasificación