Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单元素_9月30日作业01
Blogger Information
Blog 5
fans 2
comment 0
visits 3240
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单元素_9月30日作业01
边边
Original
532 people have browsed it

表单元素

一、表单元素标签

标签 作用 学习的属性
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>

案例界面：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：你是刚报名的吗?作业才写了这几个? 赶紧加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post