HTML表单标签

表单:专门用来搜集用户信息

元素:在HTML中 标签、标记、表单都是指HTML中的标签
如:<a> a标签、a标记、a元素

表单元素:也是HTML中的一些标签,只是它们比较特殊,有特殊的外观的默认的功能

表单格式:
<form>
<表单元素>
</form>

常见的表单元素:
① input标签
type属性:
text明文本
password密码

radio 单选框,必须设置name属性为相同的值
<input type="radio"  name="xxx"/>

radio默认不会选中任何选项,需要添加一个checked属性
<input type="radio" name="xx" checked="checked"/>男

value属性:可以给输入框输入默认值

checkbox 多选框架,可同时选择多个

Paste_Image.png

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/6650500-3e7ae1b3c479d1d1.png?imageMogr2/auto-

type的其它属性:
按钮 type="button" 配合JS做一些相应操作
<input type="button" value="点击提交" onclick="alert(200)"/><br />

<input type="image" src="img/images/register.jpg" onclick="alert(200)"/>

重置按钮:把填写好的表单数据清空
<input type="reset" onclick="alert(200)"/>
如果想修改 重置按钮 的title,可通过value属性来修改
<input type="reset" value="清空" onclick="alert(200)"/>

提交按钮:把表单添加的数据提交到服务器
①需要给form表单添加action属性 ,通过action属性指定需要提交的服务器地址
②表单中需要提交的数据 都要设置name属性
<input type="submit" onclick="alert(200)"/>

Paste_Image.png
Paste_Image.png
Paste_Image.png

隐藏域:配合提交按钮 默默的将数据提交到服务器 用户不知情,在界面看不到这个隐藏域
<input type="hidden" name="hiddenData" value="要提交的数据">

Label标签:让输入框和文字绑定
默认情况下,文字与输入框无关联,点击文字 输入框不会聚焦
文字用label标签包围,输入框添加id属性,label标签添加for属性和输入框的id绑定

Paste_Image.png

简化的版本

Paste_Image.png

DataList标签:给输入框绑定 待选项
格式:
<datalist>
<option>待选项</option>
</datalist>

Paste_Image.png

input标签type在H5中新增的类型:
email 、url、date、number、

表单标签中,不光有input标签,还有一些其它的标签
select标签:定义下拉列表,城市选择。。
<select>
<option>列表数据</option>
</select>

selct标签:自己就是一个列表
datalist标签:指定待选项 绑定给一个输入框

Paste_Image.png

可以给option标签包围optgroup

Paste_Image.png

多行输入框:textarea
<textarea> 内容 <teatarea>
注意:默认输入框可无限换行、有自己的宽度和高度
cols可修改宽度 rows可修改高度

Paste_Image.png

fieldset标签给表单添加一个边框
legend标签给边框指定一个标题

Paste_Image.png

orient/strip%7CimageView2/2/w/1240)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 表单标签 格式: <表单元素> 作用; 表单就是专门用来收集用户信息的 表单元素 input 格式: 作用:inp...
    MGd阅读 1,125评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,321评论 1 41
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 920评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,962评论 19 139
  • 《关键20小时》读书笔记2: 花在技能习得上的时间不但关系到你能不能全神贯注的投入到刻意练习地练习和聪明地练习,而...
    睡午觉的猫儿阅读 1,546评论 3 9