¡Enseñanza práctica! Una gran sección de html: formularios

El formulario es el principal responsable de la función de recopilación de datos en la página web. El propósito es interactuar con la entrada del usuario y el servidor. También es otra gran sección de html. Por lo tanto, el contenido del formulario se enumera por separado en este número. Es casi una enseñanza práctica. Espero que pueda serle útil.

Primero, un formulario necesita una etiqueta de formulario

<form action="" method=""></form>

El valor de la acción es la dirección del servidor donde se envían los datos, y el valor de método es el método de envío de datos Hay dos atributos: obtener: consultar datos del servidor y publicar: modificar datos del servidor. La publicación se usa generalmente, porque es más segura , la barra de direcciones no mostrará el contenido enviado al enviar el formulario.

Seguido por tipo de formulario

Los formularios generales se dividen en cuadros de texto, cuadros de contraseña, cuadros de envío, cuadros de radio, cuadros de verificación, cargar archivos, botones de reinicio, botones de imagen, cuadros desplegables, cuadros de texto de varias líneas y botones normales.

nombre	Valor de atributo	Campo de formulario
Caja de texto	texto	entrada
Cuadro de contraseña	contraseña	entrada
Enviar cuadro	enviar	entrada
Caja individual	radio	entrada
Caja	caja	entrada
Caja desplegable	opción	Seleccione
subir archivos	archivo	entrada
Cuadro de texto de varias líneas	textarea	textarea
Botón de imagen	imagen	entrada
Botón de reinicio	Reiniciar	entrada
Botón normal	botón	botón

Hablemos más sobre

Caja de texto:

<form >
	 文本框:<input type="text" placeholder="提示" name ="name" 	value="默认值">
</form>

Mostrar contenido:

aquí hay una explicación, el valor del marcador de posición establece el texto de la solicitud, el valor establece el texto predeterminado y, si se agrega el atributo deshabilitado, el valor del valor se establece como inmutable.

Cuadro de contraseña:

<form >
	 密码框:<input type="password" placeholder="提示" >
</form>

Mostrar contenido:

Enviar cuadro:

<form >
	提交框：<input type="submit" value="点击提交">
</form>

Mostrar contenido:

botón de opción:

<form >
	单选：<input type="radio" name ="sex"  checked="checked">男
	<input type="radio" name ="sex" >女
</form>

Mostrar contenido:

Aquí hay una explicación. Si el atributo marcado está escrito, significa que esta opción de selección única está seleccionada de manera predeterminada, y el valor del nombre debe configurarse para que sea coherente para que sea uno de los dos; de lo contrario, se producirán múltiples selecciones.
Caja:

<form >
爱好:
		<label>
		<input type="checkbox" name="favorite"  />
		唱歌</label>
		<label>
		<input type="checkbox" name="favorite"  />
		跳舞</label>
		<input type="checkbox" name="favorite"  />
		游泳
		<br/>
		<input type="checkbox" name="favorite"  />
		看书
		<input type="checkbox" checked="checked" name="favorite"  />
		玩手机
</form>

Mostrar contenido:

Permítame explicar aquí que si anida una etiqueta de etiqueta en una etiqueta de entrada, el cuadro se puede seleccionar haciendo clic en el texto.

Caja desplegable:

		<form>学历
			<select size="1">
				<option selected>博士</option>
				<option>硕士</option>
				<option>本科</option>
				<option>大专</option>
			</select>
			<br>
			<br>
			学历
			<select size="3" multiple="multiple">
				<option selected>博士</option>
				<option>硕士</option>
				<option>本科</option>
				<option>大专</option>
			</select>
		</form>

Mostrar contenido:

aquí para explicar, seleccionado representa el valor predeterminado, opción establece cada opción desplegable, múltiple representa la visualización del control deslizante y generalmente se usa junto con el tamaño. Hay varios contenidos que se muestran a la vez.

subir archivos:

		<form>
			<input type="file" />
		</form>

Contenido de la pantalla:

cuadro de texto de varias líneas:

		<form>
			多行文本框：
			<br>
			<textarea rows="10" cols="30" >
			</textarea>
		</form>

Contenido de la pantalla:

Botón de imagen:

		<form>
			<input type="image" src="1.jpg">
		</form>

Se puede hacer clic directamente en la imagen.

Botón de reinicio:

		<form action="" method="post">
			<input type="reset" name="" id="" value="重置" />
		</form>

Después de hacer clic en Restablecer, todos los datos del formulario se borrarán y se establecerán en los valores predeterminados.

Botón normal:

		<form action="" method="post">
			<button type="button">同意</button>
		</form>

Mostrar contenido: lo

anterior cubre casi todas las formas involucradas, casi una enseñanza práctica, espero que sea útil para comenzar con html o revisar html. ¡Gracias por ver!