表单

原创 2018年04月15日 14:31:40

1.先创建<form>标签,再添加<input>标签

2.input中属性size和maxlength是不同的属性,不要混淆,maxlength是用于指定可在文本框中输入的最大字符数

size指定表单元素的初始宽度

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Day905</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <form method="post" action="result.html"> <!--method属性告诉浏览器如何将数据发送给服务器,取值有get,post
  9.         使用get时,地址栏状态会发生变化,表单数据会在URL信息中显示,而post不会,
  10.           action指示服务器上处理表单输出的程序,语法为action="URL",如果没有设置它的值,则默认把数据提交到本页!--> 
  11. <!-- input -->  
  12.         <!--文本框-->  
  13.         <p>  
  14.             用户名称:<input type="text" name="txtUsename" value="请输入用户名称" readonly>  
  15.         </p>  
  16.         <p>  
  17.             用户密码:<input type="password" name="txtUsepwd" >  
  18.         </p>  
  19.         <p>  
  20.             确认密码:<input type="password" name="txtcfmpwd" disabled>  
  21.         </p>  
  22.         <!--单选框-->  
  23.         <p>  
  24.             用户性别:<input type="radio" name="sexrdo" value="男">男  
  25.               <input type="radio" name="sexrdo" value="女" checked>女       
  26.         </p>  
  27.         <!--复选框-->  
  28.         <p>  
  29.             用户爱好:吃<input type="checkbox" name="chkhobby" value="吃" checked>  喝<input type="checkbox" name="chkhobby" value="喝">  玩<input type="checkbox" name="chkhobox" value="玩">  乐<input type="checkbox" name="chkhobox" value="乐" checked>  
  30.         </p>  
  31.         <!-- 按钮 -->  
  32.         <p>  
  33.             <input type="submit" name="btnsbt" value="提交">  
  34.             <input type="reset" name="btnrst"    value="重置">  
  35.             <input type="button" name="btnbtn" value="普通按钮">  
  36.         </p>  
  37.         <!-- 隐藏域 -->  
  38.         <p>  
  39.             <input type="hidden" name="txtID" value="407862858@qq.com">  
  40.         </p>  
  41.         <!--文件选择框-->  
  42.         <p>  
  43.             请上传文件:<input type="file" name="txtfile">  
  44.         </p>  
  45. <!--textarea多行文本框-->  
  46.         <p>  
  47.             自我介绍:<textarea name="txt" cols="20" rows="5"></textarea>  
  48.         </p>  
  49. <!--选择框-->  
  50.     <!--滚动列表-->  
  51.         <p>籍贯:  
  52.             <select name="sel" size="3" multiple>  
  53.                 <option value="深圳">深圳</option>  
  54.                 <option value="北京">北京</option>  
  55.                 <option value="上海">上海</option>  
  56.                 <option value="广州" selected>广州</option>  selected默认选中属性
  57.             </select>  
  58.         </p>  
  59.     <!--下拉列表-->  
  60.         <p>意向工作城市:  
  61.             <select name="sel" >  
  62.                 <option value="深圳">深圳</option>  
  63.                 <option value="北京">北京</option>  
  64.                 <option value="上海">上海</option>  
  65.                 <option value="广州" selected>广州</option>  
  66.             </select>  
  67.         </p>  
  68. <!--为控件文组 -->  
  69.         <fieldset name="filed">  
  70.             <legend>请输入个人信息</legend>  
  71.                 用户名称:<input type="text" name="txtUsename" value="请输入用户名称" >  
  72.                 <br/>  
  73.                 用户密码:<input type="password" name="txtUsepwd" >  
  74.         </fieldset>  
  75. <!-- label-->  
  76.         <p>  
  77.             用户性别:<input type="radio" name="sexrdo" value="男" id="man"><label for="man"></label>  
  78.               <input type="radio" name="sexrdo" value="女" checked id="girl"><label for="girl"></label>       
  79.         </p>  
  80. <!-- 摘要与细节-->  
  81.         <details>  
  82.             <summary>用户基本信息</summary>  
  83.         <p>姓名:张三丰<p>  
  84.         <p>性别:男</p>  
  85.         </details>  
  86. <!-- 度量衡(进度条)-->  
  87.         <div>  
  88.             <meter min="0" max="100" value="50" tile="50%">该浏览器户不支持meter标签</meter>  
  89.         </div>  
  90. <!--时间元素-->  
  91.         <div>  
  92.             明年<time datetime="2017-02-14T0:0:0">情人节</time>约吗?  
  93.         </div>  
  94. <!--高亮文本显示-->  
  95.         <div>  
  96.             这是一段<mark>高亮</mark>显示的文本  
  97.         </div>  
  98.     </form>  
  99. </body>  
  100. </html>  
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Day905</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <form>  
  9. <!-- input -->  
  10.         <!--文本框-->  
  11.         <p>  
  12.             用户名称:<input type="text" name="txtUsename" value="请输入用户名称" readonly>  
  13.         </p>  
  14.         <p>  
  15.             用户密码:<input type="password" name="txtUsepwd" >  
  16.         </p>  
  17.         <p>  
  18.             确认密码:<input type="password" name="txtcfmpwd" disabled>  
  19.         </p>  
  20.         <!--单选框-->  
  21.         <p>  
  22.             用户性别:<input type="radio" name="sexrdo" value="男">男  
  23.               <input type="radio" name="sexrdo" value="女" checked>女       
  24.         </p>  
  25.         <!--复选框-->  
  26.         <p>  
  27.             用户爱好:吃<input type="checkbox" name="chkhobby" value="吃" checked>  喝<input type="checkbox" name="chkhobby" value="喝">  玩<input type="checkbox" name="chkhobox" value="玩">  乐<input type="checkbox" name="chkhobox" value="乐" checked>  
  28.         </p>  
  29.         <!-- 按钮 -->  
  30.         <p>  
  31.             <input type="submit" name="btnsbt" value="提交">  
  32.             <input type="reset" name="btnrst"    value="重置">  
  33.             <input type="button" name="btnbtn" value="普通按钮">  
  34.         </p>  
  35.         <!-- 隐藏域 -->  
  36.         <p>  
  37.             <input type="hidden" name="txtID" value="407862858@qq.com">  
  38.         </p>  
  39.         <!--文件选择框-->  
  40.         <p>  
  41.             请上传文件:<input type="file" name="txtfile">  
  42.         </p>  
  43. <!--textarea-->  
  44.         <p>  
  45.             自我介绍:<textarea name="txt" cols="20" rows="5"></textarea>  
  46.         </p>  
  47. <!--选择框-->  
  48.     <!--滚动列表-->  
  49.         <p>籍贯:  
  50.             <select name="sel" size="3" multiple>  
  51.                 <option value="深圳">深圳</option>  
  52.                 <option value="北京">北京</option>  
  53.                 <option value="上海">上海</option>  
  54.                 <option value="广州" selected>广州</option>  
  55.             </select>  
  56.         </p>  
  57.     <!--下拉列表-->  
  58.         <p>意向工作城市:  
  59.             <select name="sel" >  
  60.                 <option value="深圳">深圳</option>  
  61.                 <option value="北京">北京</option>  
  62.                 <option value="上海">上海</option>  
  63.                 <option value="广州" selected>广州</option>  
  64.             </select>  
  65.         </p>  
  66. <!--为控件文组 -->  
  67.         <fieldset name="filed">  
  68.             <legend>请输入个人信息</legend>  
  69.                 用户名称:<input type="text" name="txtUsename" value="请输入用户名称" >  
  70.                 <br/>  
  71.                 用户密码:<input type="password" name="txtUsepwd" >  
  72.         </fieldset>  
  73. <!-- label-->  
  74.         <p>  
  75.             用户性别:<input type="radio" name="sexrdo" value="男" id="man"><label for="man"></label>  
  76.               <input type="radio" name="sexrdo" value="女" checked id="girl"><label for="girl"></label>       
  77.         </p>  
  78. <!-- 摘要与细节-->  
  79.         <details>  
  80.             <summary>用户基本信息</summary>  
  81.         <p>姓名:张三丰<p>  
  82.         <p>性别:男</p>  
  83.         </details>  
  84. <!-- 度量衡(进度条)-->  
  85.         <div>  
  86.             <meter min="0" max="100" value="50" tile="50%">该浏览器户不支持meter标签</meter>  
  87.         </div>  
  88. <!--时间元素-->  
  89.         <div>  
  90.             明年<time datetime="2017-02-14T0:0:0">情人节</time>约吗?  
  91.         </div>  
  92. <!--高亮文本显示-->  
  93.         <div>  
  94.             这是一段<mark>高亮</mark>显示的文本  
  95.         </div>  
  96.     </form>  
  97. </body>  
  98. </html>  

表单的只读用readonly,禁用是disabled属性

2.表单的初级验证方法:

placeholder用于为文本框提供一种提示,可以描述文本框期待用户输入何种内容,在输入为空时显示,当在文本框内输入内容时消失,

required用于规定文本框中输入的内容不能为空

pattern用于验证文本框中用户输入的内容是否与自定义的正则表达式相匹配

收藏助手
不良信息举报
您举报文章:表单
举报原因:
原因补充:

(最多只允许输入30个字)