HTML标签（二）

​

 

/*
*作者：呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货，记得关注哦！
*vx：it_daimeng
*/

　　

表单标签

        表单: form:所有的表单元素都是放在form中提交到服务器端 

            属性: action:提交的页面地址  

                 method:提交的方式

                 get:提交的内容都会通过url传递,不安全，传递的内容长度有限制

                 post:提交的内容会加密，通过正文传递，可以提交大量数据

         表单元素:

                    1)输入框

                        《1》文本框：<input   type="text"           name="必须的"  />

                        《2》密码框：<input   type="password"  name="必须的"  />

                        《3》单选框：<input   type="radio"        name="必须的"  />

                                   注意：

                                          同组的单选按钮名称(name) 必须相同，才能彼此互斥

                        《4》复选框：<input   type="checkbox" />

                        《5》按钮   ：

                                          普通按钮：<input   type="button"  />

                                          重置按钮：<input   type="reset"  />

                                          提交按钮：<input   type="submit"  />

                                          图片按钮：<input   type="image"  src="图片的路径"     />

                                          注意： 默认有 表单提交功能的是 ： submit   /   image

                        《6》隐藏域：<input   type="hidden"  />

                        《7》上传文件：<input   type="file"  />          

   用户名:<input type="text"  size="20"  value="客户输入的值或者默认的值" />

密码:<input type="password"  value="123456" />

性别:<input type="radio" name="sex" value="1"  checked="checked" />男

 <input type="radio" name="sex" value="2"  />女

爱好:<input type="checkbox"  value="1" checked="checked" />吃饭

 <input type="checkbox"  value="2" checked="checked" />睡觉

 <input type="checkbox"  value="3" />打豆豆

上传控件:<input type="file"   />

隐藏框:<input type="hidden" value="商品id"  />       

<input type="submit"  value="注册" /> 

<input type="reset" value="取消"  />

 <input type="button" value="普通按钮"  />

图片提交按钮:<input type="image" src="img/27125326.jpg"  />

　　

        2) 多行文本框                   

  <textarea   cols="列数目"   rows="行数目" ></textarea>

            留言:<textarea rows="4" cols="30">  </textarea>

　　

1. 下拉列表框

                   

  <select >

                                   <option  value="必须的">文本值</option>

                     </select>             

  你的密保问题:

<select>

     <option value="1">请选择</option>

     <option selected="selected" value="2">你的妈妈叫什么名字?</option>

    <option value="3">你的爸爸叫什么名字?</option>

    <option value="4">你最喜欢的电影?</option>              

 </select>

下拉列表框可以设置为多选:

<select multiple="multiple" size="3">

   <option value="1">请选择</option>

   <option selected="selected" value="2">你的妈妈叫什么名字?</option>

   <option value="3">你的爸爸叫什么名字?</option>

   <option value="4">你最喜欢的电影?</option>            

 </select>

　　

        4) HTML 5 中扩展的 表单标记

                     <1> <input type="tel"  pattern="\d{8}" />

                     <2> <input type="email"   />

                     <3> <input type="url"   />              

                     <4> <input type="color"   />                 

                     <5> <input type="search"   />              

                     <6> <input type="number"   />              

                     <7> <input type="range"   />

                     <8> <input type="date|time|datetime|month|week|datetime-local"   />

                    <9><input type="text"  list="data2" />

                                   <datalist id="data2">

                                          <option value="百度"></option>

                                          <option value="谷歌"></option>

                                          <option value="必应"></option>

                                   </datalist>

颜色:<input type="color"  />

邮箱:<input type="email"  />

日期:<input type="date"  />

搜索:<input type="search"  />        

提示框<input type="text" list="data"  />

<datalist id="data">

<option>html5</option>

<option>html4</option>

 </datalist>

　　

              5) HTML 5 中扩展的 表单标记 的属性

                     <1> 定义正则表达式： pattern="\d{8}"

                     <2> min="1"     max="100"         step="5"

                     <3> form="某个<form>标记的 ID属性"  : 定义表单元素属于哪一个表单

                     <4> placeholder="请输入您的联系方式" :  文本框中的 默认的灰色提示信息，用户输入时会自动消失

                     <5> required="required"           : 用来定义表单元素为【必填】项               

      电话:<input type="text" pattern="\d{11}"  />

用户名:<input type="text" required="required" placeholder="请输入用户名"  />

 <input type="submit" name="注册" disabled="disabled"  />   

 

​