Ensino prático! Uma grande seção de html: forms

O formulário é responsável principalmente pela função de coleta de dados na página da web. O objetivo é interagir com a entrada do usuário e o servidor. Também é outra grande seção do html. Portanto, o conteúdo do formulário está listado separadamente nesta edição. É quase um ensino prático. Espero que possa ser útil para você.

Primeiro, um formulário precisa de uma tag de formulário

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

O valor da ação é o endereço do servidor onde os dados são enviados, e o valor do método é o método de envio dos dados.Existem dois atributos: get: consultar dados do servidor e post: modificar dados do servidor. Post geralmente é usado, porque é mais seguro , a barra de endereço não exibirá o conteúdo enviado ao enviar o formulário.

Seguido por tipo de formulário

Os formulários gerais são divididos em caixas de texto, caixas de senha, caixas de envio, caixas de rádio, caixas de seleção, upload de arquivos, botões de redefinição, botões de imagem, caixas suspensas, caixas de texto multilinhas e botões normais.

nome	Valor do atributo	Campo de formulário
Caixa de texto	texto	entrada
Caixa de senha	senha	entrada
Caixa de envio	enviar	entrada
Caixa única	rádio	entrada
Caixa de seleção	caixa de seleção	entrada
Caixa suspensa	opção	selecionar
fazer upload de arquivos	Arquivo	entrada
Caixa de texto multilinha	área de texto	área de texto
Botão de imagem	imagem	entrada
Botão de reset	Redefinir	entrada
Botão normal	botão	botão

Vamos falar mais sobre

Caixa de texto:

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

Exibir conteúdo:

Aqui está uma explicação, o valor do espaço reservado define o texto do prompt, o valor define o texto padrão e, se o atributo disabled for adicionado, o valor do valor será definido como inalterável.

Caixa de senha:

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

Exibir conteúdo:

Caixa de envio:

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

Exibir conteúdo:

botão de opção:

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

Exibir conteúdo:

Aqui está uma explicação. Se o atributo marcado estiver escrito, significa que esta opção de seleção única está selecionada por padrão. O valor do nome deve ser definido para ser consistente para torná-lo um dos dois, caso contrário, várias seleções ocorrerão.
Caixa de seleção:

<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>

Exibir conteúdo:

deixe-me explicar que se você aninhar uma tag de rótulo em uma tag de entrada, a caixa pode ser selecionada clicando no texto.

Caixa suspensa:

		<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>

Exibir conteúdo:

aqui para explicar, selecionado representa o valor padrão, opção define cada opção suspensa, múltiplo representa a exibição do controle deslizante e geralmente é usado em conjunto com o tamanho. Existem vários conteúdos que podem ser exibidos ao mesmo tempo.

fazer upload de arquivos:

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

Exibir conteúdo:

caixa de texto multilinha:

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

Exibir conteúdo:

botão Imagem:

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

A imagem pode ser clicada diretamente.

Botão de reset:

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

Após clicar em Redefinir, todos os dados do formulário serão apagados e definidos para os valores padrão.

Botão normal:

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

Exibir conteúdo: O conteúdo

acima cobre quase todas as formas envolvidas, quase um ensino prático. Espero que seja útil para você começar a usar o html ou revisar o html. Obrigado por assistir!