博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
11.HTML表单元素【中】
阅读量:7080 次
发布时间:2019-06-28

本文共 2127 字,大约阅读时间需要 7 分钟。

                                                  第十章 表单元素【中】

一、type 属性总汇

   1typetext时  :一个单行文本,默认行为;     //<input type="text">

             text为默认值,呈现的是一个可以输入任意字符的文本框,还提供了额外属性:

             |——————————————————————————————|

             |    属性名称      |                    说明                 |

             |      list        |     指定为文本框提供建议的datalist元素,其值为datalist元素的id

             |    maxlegth      |     设置文本框字符的最大长度            |

             |    pattern       |     用于输入验证的正则表达式            |

             |  placeholder     |     输入文字的提示 (在输入框里,没有自字符时里面有你设置的提示信息)

             |    readonly      |     文本框处于只读状态                  |

             |    disabled      |     文本框处于禁用状态                  |

             |      size        |     设置文本框宽度                      |

             |     value        |     设置文本框初始值(在框里有一个初始值,也可以更改输入其他值)

             |    required      |     表明用户必须输入一个值,否则无法通过输入验证

             |——————————————————————————————|

          例: <form>

           <input type="text" list="abc">

               </form>

               <datalist id="abc">

           <option value="1">苹果</option>

           <option value="2">橘子</option>

           <option value="3" label="香蕉">

           <option value="菠萝">

               </datalist>

           

   2typepassword时  :隐藏字符的密码框;(输入的字符会变成黑圆圈)(和上面的额外属性一样)

   3typeserch时  :在文本框后会显示一个叉来取消搜索内容,额外属性和text一样;(火狐浏览器不支持)

   4typenumber时(只能输入数字,输入字母不让提交)/range(输入数字的范围)  :

             |——————————————————————————————|

             |    属性名称      |                    说明                        |

             |      list                   |     指定为文本框提供建议的datalist元素,其值为datalist元素的id

             |      min             |     设置可接受的最小值                    |

             |      max            |     设置可接受的最大值                    |

             |    readonly         |     设置文本框只读                        |

             |    required         |     表明用户必须输入一个值,否则无法通过输入验证

             |     value          |     设置文本框初始值(在框里有一个初始值,也可以更改输入其他值)

             |      step          |     指定上下调节值的步长                  |

             |——————————————————————————————|

   5typedate系列时:  //<input type="date/month/time/week/datetime/datetime-local">(额外属性和number一样)

   6typecolor时   :文本框获取颜色的功能

   7typecheckbox/radio  :

         1checked  设置复选框,单选框是否为勾选状况;

         2required 表示用户必须勾选,否则无法通过验证;

         3value    设置复选框,单选框勾选状态时提交数据,默认为on

 

音乐<input type="checkbox" name="music" value="1">     }    可以选择一个或多个

体育<input type="checkbox" name="sport" value="2">     }

 

<input type="radio" name="sex" value="1" checked>男    }    只能选择其中一个,点一个,另一个会自动取消,且name必须一样。

<input type="radio" name="sex" value="2">女            }    checked默认首选。

   8typesubmit/reset/button时:(第10章【上】中的一、7

         1submit  生成一个提交按钮;

         2reset   生成一个重置按钮;

         3button  生成一个普通按钮;

   9typeimage时:生成一个图片按钮,点击实现提交功能。     //<input type="image" src="图片名称">

          额外属性:src/alt(提供图片的文字说明)/width/height

   10typeemail(电子邮件格式,支持比较好)/tel(电话格式,基本不支持)/url(网络格式,支持一般)

   11typehidden时 :生成一个隐藏文件,一般用于表单提交时关联主键ID提交,而这个数据作为隐藏存在。

   12typefile时 :上传控件,用于文件的上传。

          额外属性

           accept        指定接受html类型

          required       表明用户必须输入一个值,否则无法通过输入验证

 

转载于:https://www.cnblogs.com/keshuai752100461/p/8485075.html

你可能感兴趣的文章
SSDB图形界面管理工具:phpssdbadmin安装部署
查看>>
how to backup and restore database of SQL Server
查看>>
Hibernate- QBC查询方式
查看>>
【Linux】linux查看日志文件内容命令tail、cat、tac、head、echo
查看>>
php中的或运算
查看>>
位图(BitMap)索引
查看>>
CSS3伪类和伪元素的特性和区别
查看>>
vue实现文章内容过长点击阅读全文功能
查看>>
记一次elementUI Icon 加载无效的问题。并且提示错误 Failed to decode downloaded font:
查看>>
OpenGL之位图的绘制和gluOrtho2D等函数详解
查看>>
Linux磁盘概念及其管理工具fdisk
查看>>
Linux epoll版定时器
查看>>
objective C中数据持久化方式1--对象归档
查看>>
Python面向对象编程 - 一个记事本程序范例(一)
查看>>
马桶餐厅
查看>>
【servlet】Servlet工作原理
查看>>
我对程序员技能的一些认识
查看>>
在linux下如何修改oracle的sys和system的密码
查看>>
SQL获取所有用户名,数据库名、所有表名、所有字段名及字段类型
查看>>
【HoorayOS】开源之路,我还能走多久
查看>>