search

博客列表 >表单元素_9月30日作业01

表单元素_9月30日作业01

边边
边边原创
2020年10月28日 11:45:26531浏览

表单元素

一、表单元素标签

标签 作用 学习的属性
form 包裹其他表单元素 action,method,enctype
input 文本密码单选多选文件上传框 type,name,value,placeholder，autofocus,reqiured
select,option 下拉框 selected
textarea 文本域 多行文本框

二、form标签的属性

  • action属性的值表示表单数据回传位置
  • method属性的值表示表单数据以何种方式回传
  • enctype属性的值表示文件上传模式

三、input标签的属性

input标签常见有以下属性：

  • type属性的值代表不同的input表单类型
    • text：文本框
    • email:邮件地址框
    • password:密码框
    • radio:单选框
    • checkbox:多选框
    • file:文件选择上传框
    • hidden:隐藏
  • placeholder属性的值代表表单中的提示文字
  • reqiuered属性表示本表单为必填项
  • autofocus属性表示本表单自动获得焦点

四、注册界面案例

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="static/css/1.css" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h3 class="title">用户注册</h3>
  11.     <form
  12.       action="check.php"
  13.       method="post"
  14.       class="register"
  15.       enctype="multipart/form-data"
  16.     >
  17.       <label for="username">账号：</label>
  18.       <input
  19.         type="text"
  20.         name="username"
  21.         id="username"
  22.         value=""
  23.         placeholder="最少6位"
  24.         required
  25.         autofocus
  26.       />
  28.       <label for="email">邮箱：</label>
  29.       <input
  30.         type="email"
  31.         name="email"
  32.         id="email"
  33.         value=""
  34.         placeholder="输入有效邮件地址"
  35.         reqiured
  36.       />
  38.       <label for="pwd1">密码：</label>
  39.       <input
  40.         type="password"
  41.         name="pwd1"
  42.         id="pwd1"
  43.         value=""
  44.         placeholder="输入6位密码"
  45.         reqiured
  46.       />
  48.       <label for="secret">性别：</label>
  49.       <div class="gender">
  50.         <div>
  51.           <input type="radio" name="gender" id="male" value="male" />
  52.           <label for="male">男</label>
  53.         </div>
  55.         <div>
  56.           <input type="radio" name="gender" id="female" value="female" />
  57.           <label for="female">女</label>
  58.         </div>
  60.         <div>
  61.           <input
  62.             type="radio"
  63.             name="gender"
  64.             id="secret"
  65.             value="secret"
  66.             checked
  67.           /><label for="secret">保密</label>
  68.         </div>
  69.       </div>
  71.       <label for="game">兴趣：</label>
  72.       <div class="hobby">
  73.         <div>
  74.           <input
  75.             type="checkbox"
  76.             name="hobby[]"
  77.             id="game"
  78.             value="game"
  79.             checked
  80.           /><label for="game">游戏</label>
  81.         </div>
  82.         <div>
  83.           <input
  84.             type="checkbox"
  85.             name="hobby[]"
  86.             id="shoot"
  87.             value="shoot"
  88.           /><label for="shoot">摄影</label>
  89.         </div>
  90.         <div>
  91.           <input
  92.             type="checkbox"
  93.             name="hobby[]"
  94.             id="travel"
  95.             value="travel"
  96.           /><label for="travel">旅游</label>
  97.         </div>
  98.         <div>
  99.           <input
  100.             type="checkbox"
  101.             name="hobby[]"
  102.             id="program"
  103.             value="program"
  104.           /><label for="program">编程</label>
  105.         </div>
  106.       </div>
  108.       <label for="edu">学历：</label>
  109.       <select name="edu" id="edu">
  110.         <option value="1">专科</option>
  111.         <option value="2">本科</option>
  112.         <option value="3" selected>硕士</option>
  113.       </select>
  115.       <label for="user_pic">头像：</label>
  116.       <div>
  117.         <input type="hidden" name="file_size" value="80000" />
  118.         <input type="file" name="user_pic" id="user_pic" />
  119.         <div class="user_pic"></div>
  120.       </div>
  122.       <label for="user_resume">简历：</label>
  123.       <div>
  124.         <input type="hidden" name="text_size" value="80000" />
  125.         <input type="file" name="user_resume" id="user_resume" />
  126.         <div class="user_resume"></div>
  127.       </div>
  129.       <label for="beizhu">备注：</label>
  130.       <textarea
  131.         name="beizhu"
  132.         id="beizhu"
  133.         cols="30"
  134.         rows="10"
  135.         placeholder="最多输入300字"
  136.       ></textarea>
  137.       <span>还能输入10字</span>
  139.       <button>提交</button>
  140.     </form>
  141.   </body>
  142. </html>

案例界面：

上一条：1021.作业-rem.em,px,vh,vw示例下一条：如何使用表单元素实现会员注册功能
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多