表单
北冥复习html(三)
一、表单介绍
概念:表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入内容。
作用:提交用户输入的数据至服务端
二、结构
<form action = " " method = " get " enctype = " "> <table border = 1></table>
解释:
- form ==》 声明一个表单
- action ==》 向何处发送数据
- method ==》 提交方式:get----明文发送; post----安全不可见
三、元素
action: 向何处发送数据
data: 供自动插入数据
input: 表单元素,里面有 type = 类型,name = 名字,value = 默认存放数据,size = 长度,maxlength = 表单元素最大输入值,checked = 指定表单元素是否选中
以实例说明吧,简单明了:
1、登录
<from method = "post" action = "login.html"> 账号:<input type = "text"/><br/> 密码:<input type = "password"><br/> <input type = "reset" value = "重置"/> </from>
显示效果:
2、性别选择:
<input name="sex" type="radio" value="男" checked/>男 <input name="sex" type="radio" value="女" />女
显示效果:
3、兴趣选择
<input type="checkbox" name="skill" value="talk" />演讲 <input type="checkbox" name="skill" value="code" checked/>编程 <input type="checkbox" name="skill" value="manage" />管理
显示效果:
4、学历选择
<select name="edu"> <option value="1" selected="selected">小学</option> <option value="2">初中</option> <option value="3">高中</option> <option value="4">专科</option> <option value="5">本科</option> </select>
显示效果:
5、按钮
<input type="reset" name="butReset" value="重置按钮"/> <input type="submit" name="butSubmit" value="提交按钮"/> <input type="button" name="butButton" value="普通按钮"/>
显示效果:
6、多文本域
<textarea name="show" cols="20" rows="10">文本内容</textarea>
其中:cols 文本域宽度,rows 文本域高度
显示效果:
7、邮箱
<input type="email" name="myEmail"/> <input type="submit" value="提交" />
显示效果:
8、年龄
<input type="number" name="age" min="1" max="100" step="1" /> <input type="submit" />
显示效果:
9、音量
<input type="range" name="range1" min="0" max="100" step="1" /> <input type="submit" />
显示效果:
10、关键字
<input type="search" name="so" /> <input type="submit" />
显示效果:
你输入内容的时候,搜索框后边会自动出现一个小×,点击这个小×,可以清除输入的内容。
赞 (0)