HTML表单标签

继续进行HTML的基础学习与练习,如果想学习网页和对网页感兴趣的朋友,希望这篇文章能给你有帮助。

表单标签from(表单标签是用户提交数据与服务器接收数据的交互标签)

action属性 是一个url,描述指向的处理函数的行动
method 设置提交给服务器的方式
enctype 提交方式,默认是键值对方式

常见的表单标签(input,select,textarea)

input 的属性 作用
text属性 存储文本
value属性: 设置默认值,每个属性都有,但不是每个属性都使用看自己需要
passwd属性: 密文显示输入密码
button属性: 提交数据
checkbox属性: 设置多选
name属性: 向服务器传递的数据,在表单中,当二个name一样时表示为同一组,用来做多个选项中选择一个
radio属性: 显示是一个范围,可以设置默认值,最大值,最小值
time 设置时间
url 筛选如果表示网页就会提示错误
email 筛选如果表示网页就会提示错误
file 准备条件(1,enctype=“multipart/form-data” 2 ,method=“post”) 上传文件
color 设置颜色(通常用来设置背景颜色)
input下按钮标签 作用
submit 提交表单标签
reset 清除form框下自己写的数据,一般不在使用
button 不添加数据,但显示
image 提交一般是标签图片
hidden 提交隐藏数据的标签
search 显示一个搜索框

<html>
	<head>
		<meta charset="utf-8" />
		<title>网页title>
		
		
		
	head>
	<body>
		<h1>用户注册h1>
		<form action="#" method="get" enctype="">
			
			用户下面
			
			
			用户登录<input type="text"  name="nickname"/>
			
			
			<label for="passwd" >用户名密码label>
			<input type="password" id="passwd" />
			
			<p>
				
				
				用户性别 :<input type="radio" value="man" name="gender"/>
				<input type="radio" value="woman" name="gender"/>p>
			<p>
				
				爱好:
				<input type="checkbox" value="游戏" name="happy" />游戏
				<input type="checkbox" value="电视剧" name="happy" />电视剧
				<input type="checkbox" value="电影"  name="happy" />电影
				<input type="checkbox" value="跑步" name="happy" />跑步
			p>
			<p>
				
				网页:
				<input type="url" value="网页" name="url" />
			p>
			<p>
				上传头像:
				<input type="file" value="上传文件" name="wj"/>
			p>
			<p>
				用户邮箱:
				<input type="email" value="邮箱" name="email"/>
			p>
			<p>
				
				<input type="date" value="时间date" />
				<br>
				<input type="datetime-local" value="时间datetime-local" />
				
			p>
			<p>
				颜色选择器:
				<input type="color" />
				
			p>
			<p>
				
				<input type="radio" value="5"  min="0" max="10" />
			p>
			<p>
				
			<input type="submit" value="提交" />
			
			<input type="reset"  value="重置"/>
			
			<input type="button" value="这是一个标签" />
			
			<input type="image" src="" />
			
			<input type="hidden"  name="o1" value="1"/>
			
			<input type="search" name="搜索框" />
			
			p>
			
			<button>注册button>
		form>
		
	body>
html>


显示:
HTML表单标签_第1张图片

selsctc 的属性 作用
option 设置下拉参数
textarea (文本域)的属性 作用
row 设置行高
cols 设置列表宽

<html>
	<head>
		<meta charset="utf-8" />
		<title>网页title>
		
		
		
	head>
	<body>
		<form action="#" method="get" enctype="">
				<p>
				用户地址:
				<select name="address" id="address"
					 value="-1">请选择您国家地址option>
					
					<option value="中国">中国option>
					<option value="韩国">韩国option>
					
					<option>美国option>
					<option>日本option>
				select>
				<p>
					建议: <br>
					<textarea row="10" cols="20">textarea>
					
					
				p>
				
			p>
		form>
		
	body>
html>

显示:
HTML表单标签_第2张图片

一些特殊表单标签

写法: autofocus =“autofocus” 可以写成 autofocus

placeholder=“请输入名称” :框内提示信息

用户登录<input type="text"  name="nickname"  placeholder="请输入名称" />

在这里插入图片描述

readonly 定义 value,只允许看不允许修改
disable与readonly相似

用户下面
用户下面

在这里插入图片描述

autocomplete : 搜索的时候自动补齐(也可以为text)

<input type="search" name="搜索框" autocomplete="on" />
			
			

autofocus 自动聚焦(无法在多选择上聚焦)

用户下面

autofocus 光标每次刷新,光标都会显示在autofocus的属性上

<input type="url" value="网页" name="url"  readonly  autofocus />

checked 默认值属性(默认情况下的选择)
selected 与 checked 作用一样

<input type="checkbox" value="游戏" name="happy " checked />电视剧

在这里插入图片描述

你可能感兴趣的:(HTML,html)