HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio)、复选框(checkboxes)等等。
表单的标签是<form>:
<form>
表单的输入元素
</form>
--------------------------------------------------------------------------------------------------------------------------------------
表单的输入元素
通常情况下表单是使用输入标签<input> 他是一个自闭和标签
输入的类型是由type定义的,通常使用的有:
文本输入框:<input type="text">
密码输入框:<input type="password">
单选框:<input type="radio">
复选框:<input type="checkbox">
搜索框:<input type="search">
滑动条:<input type="range" min="" max="" step="">
颜色框:<input type="color">
日期选择:<input type="date">
邮箱:<input type="email">
数字:<input type="number" min="最小值" max="最大值" step="间隔">
提交按钮:<input type="submit">
重置按钮:<input type="reset">
普通按钮:<input type="button">
图片按钮:<input type="image" src="" width="" height="">
文件域:<input type="file>
下拉列表元素 是一个标签组:
<select>
<option></option>
</select>
多行文本域:
<textarea cols="列数" rows="行数" maxlength="最大字数">
只读属性:readonly
禁用属性:disabled
隐藏域:
<input type="hidden" name="" value="">
表单的标注:<label></label>
例如:
<input type="checkbox"name="like"id="sport"><label for="sport">运动</label>
表单的验证:
placeholder是提请用户placeholder=""
required 如果没有填写内容就不允许提交
pattern 检测输入的内容与正则表达式相匹配 pattern="正则表达式"
下面是一个简单的注册页面的例子:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h2>欢迎注册本页面</h2>
<form action="iframe的用法.html"method="get"target="_blank"enctype="multi/form-data">
<p>
请出入你的用户名:<input type="text"name="username">
</p>
<!--没有name就没有就安全?!-->
<p>
请输入你的密码:<input type="password"name="psw" placeholder="mima">
</p>
<p>请选择你的性别<input type="radio"name="sex"checked="checked">男<input type="radio"name="sex">女
</p>
<p>
请选择感兴趣的标签
<input type="checkbox"name="like"id="sport"><label for="sport">运动</label>
<input type="checkbox"name="like">音乐
<input type="checkbox"name="like">唱歌
<input type="checkbox"name="like">旅行
<input type="checkbox"name="like">美食
<input type="checkbox"name="like">睡觉
</p>
<p>
请选择最喜欢的颜色
<input type="color">
</p>
<p>
请选择出生日期
<input type="date">
</p>
<p>
请选择您所在的城市:
<select name="" id="">
<option value="">武汉</option>
<option value="">北京</option>
<option value="">郑州</option>
<option value="">天津</option>
<option value="">上海</option>
</select>
</p>
<p>
个性签名:
<textarea name="" id="" cols="30" rows="10">展示自己</textarea><!--默认写上去的!-->
</p>
<p>
上传照片
<input type="file">
</p>
<p>
邮箱
<input type="email">
</p>
<p>
工资
<input type="number"min="100" max="1000000" step="500">
</p>
<p>
请输入搜索关键字
<input type="search"name="">
<input type="submit" value="GO">
</p>
<p>
滑动条:
<input type="range"min="0"max="100"step="1">
</p>
<p>
<input type="submit">
<input type="button"value="点我">
<input type="reset">
<input type="image"src="D:\develope\images\16.jpg" alt=""width="100"heiht="25">
</p>
</form>
<form action=""></form>
<form action=""></form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h2>欢迎注册本页面</h2>
<form action="iframe的用法.html"method="get"target="_blank"enctype="multi/form-data">
<p>
请出入你的用户名:<input type="text"name="username">
</p>
<!--没有name就没有就安全?!-->
<p>
请输入你的密码:<input type="password"name="psw" placeholder="mima">
</p>
<p>请选择你的性别<input type="radio"name="sex"checked="checked">男<input type="radio"name="sex">女
</p>
<p>
请选择感兴趣的标签
<input type="checkbox"name="like"id="sport"><label for="sport">运动</label>
<input type="checkbox"name="like">音乐
<input type="checkbox"name="like">唱歌
<input type="checkbox"name="like">旅行
<input type="checkbox"name="like">美食
<input type="checkbox"name="like">睡觉
</p>
<p>
请选择最喜欢的颜色
<input type="color">
</p>
<p>
请选择出生日期
<input type="date">
</p>
<p>
请选择您所在的城市:
<select name="" id="">
<option value="">武汉</option>
<option value="">北京</option>
<option value="">郑州</option>
<option value="">天津</option>
<option value="">上海</option>
</select>
</p>
<p>
个性签名:
<textarea name="" id="" cols="30" rows="10">展示自己</textarea><!--默认写上去的!-->
</p>
<p>
上传照片
<input type="file">
</p>
<p>
邮箱
<input type="email">
</p>
<p>
工资
<input type="number"min="100" max="1000000" step="500">
</p>
<p>
请输入搜索关键字
<input type="search"name="">
<input type="submit" value="GO">
</p>
<p>
滑动条:
<input type="range"min="0"max="100"step="1">
</p>
<p>
<input type="submit">
<input type="button"value="点我">
<input type="reset">
<input type="image"src="D:\develope\images\16.jpg" alt=""width="100"heiht="25">
</p>
</form>
<form action=""></form>
<form action=""></form>
</body>
</html>