4.Html——表单

表单1

<form>

    <input type=“text”>   单行文本框

    <input type="text" value="XX">   占位符

    <input type="text"  placeholder="XX">    文本框内对用户的引导,灰色的

    <input type="text"  placeholder="XX"  size="50">    增加文本框内可见的字符数目

    <input type="text"  placeholder="XX"  readonly>   用户只读模式

 

    <input type="password" placeholder="XX">  由用户自己输入进去,而在屏幕上做出一定隐藏,就像输入密码

    <textarea row="20">XXXXX</textarea>  增加文本框的宽度

    <textarea col="20">XXXXX</textarea>   增加文本框的长度

                                                                                                                                                                                     

 

表单2

<form>

    <input type=button  value="按钮“>  出现一个上面写着按钮的按钮

    <input type=“submit" value="提交”>   出现一个上面写着提交的按钮(配合action属性)

    button>input button>input submit

    <input type="range">  划表,可移动

    <input type="range"  mix="-100"  max="100"  stpe="100"  valve="-100">

                                  最小值    最大值    一次移动标准是100  起初滑轮指示的范围就是100

    <input number="range"  mix="-100"  max="100"  stpe="100"  valve="-100">  文本框,可输入,上下三角

    <input type="checkbox">  选择       相当于记住我的功能,勾选,方框在选择的旁边,或是几选一

   

    <input type="radio" name="a"  checked>星月   

    <input type="radio" name="a" >星月   

    <input type="radio" name="a" >星月   

     三选一,checked的作用是如果用户自己不进行选择,就默认带有checked的选项

 

 <form>

   <select>

        <option>苹果<option>

        <option>香蕉<option>

        <option>水蜜桃<option>

  </select>

一个文本框,点开上下滑动会展示所有选项

 

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

<datalist id="X">

        <option>苹果<option>

        <option>香蕉<option>

        <option>水蜜桃<option>

</datalist>

一个文本框,点开上下滑动会展示所有选项,但是用户可以自己从键盘输入进行补充

 

                                                                                                                                                                               

 

表单3

<form>

    <input type="email">  获取电子邮件

    <input type="tel">  获取电话号码

    <input type="url">  获取url

    <input type="data">  获取时间

    <input type="color">  获取颜色

    <input type="search">  搜索功能,规范一下

    <input type="hidden"  value="XX">  

    <input type="image"  src="图片的地址"  width="40px">  上传图片

  

  <input type="fife">  上传文件  

Multiple 的作用是一次允许上传多个文件;Required的作用是必须上传一个文件    

当使用input元素上传文件提交表单时,要设置如下内容:

<form enctype="multipart/form-data"></form>

发布了20 篇原创文章 · 获赞 17 · 访问量 162

猜你喜欢

转载自blog.csdn.net/weixin_46319702/article/details/105038739