简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2022.10.18第四课：form表单的学习
Blogger Information
Blog 14
fans 0
comment 0
visits 7467
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
2022.10.18第四课：form表单的学习
启动未来
Original
475 people have browsed it

form表单的学习

我的笔记

1.form表单是客户与浏览器交互的重要途径；

2.每个控件元素都有一个form属性，可用于js调用

3.隐藏域可以隐式向服务器传递信息，但用户不可见

4.label元素的for属性值=input控件的id属性值，用于鼠标移动到控件上时自动显示焦点

5.名值对，是每个控件都有的，基本上都在一行中体现，除了下拉列表的:name属性在select标签中，value属性在option标签中

6.fieldset与legend控件的成对使用，方便对表单添加分类和标题

7.datalist标签可以用于搜索提示

8.optgroup标签可以用于下拉列表备选内容的分组

9.diabled、raquired、selected属性都是布尔属性，其中，disabled属性用于：向用户显示，但是拒绝发送至服务器

10.关于复选框checkbox每个选项的名字可以用数组[]表示，方便提交服务器后的处理

我的作业：个人信息表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <form action="" method="post" enctype="multipart/form-data" name="" >
  11.         <fieldset>
  12.             <legend style="color:blue"><b>基本信息</b></legend><br>
  13.             <div>
  14.                 <label for="uname">姓&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;</label>
  15.                 <input type="text" maxlength="30"  name="username" id="uname" required>
  16.             </div><br>
  17.             <div>
  18.                 <label for="secret">性&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;</label>
  19.                 男<input type="radio" name="gender" id="male" value="male">
  20.                 女<input type="radio" name="gender" id="female" value="female">
  21.                 保密<input type="radio" name="gender" id="secret" value="secret" checked>
  22.             </div><br>
  23.             <div>
  24.                 <label for=""pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;</label>
  25.                 <input type="password" name="" id="pwd" required>
  26.             </div><br>
  27.             <div>
  28.                 <label for="jg">籍&nbsp;&nbsp;&nbsp;&nbsp;贯:&nbsp;&nbsp;</label>
  29.                 <input type="text" name="jg" id="jg">
  30.             </div><br>
  31.             <div>
  32.                 <label for="tel">手机号：</label>
  33.                 <input type="number" name="tel" id="tel">
  34.             </div><br>
  35.             <div>
  36.                 <label for="qq">QQ&nbsp;&nbsp;号:&nbsp;&nbsp;</label>
  37.                 <input type="number" name="qq" id="qq" min="3" max="30"></div>
  38.             <br>
  39.             <div>
  40.                 <label for="birth">生&nbsp;&nbsp;&nbsp;&nbsp;日：</label>
  41.                 <input type="date" name="birthday" id="birth" value="2022-10-19" min="1900-01-01" max="2099-12-31">
  42.             </div><br>
  43.             <div>
  44.                 <label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
  45.                 <input type="email" name="email" id="email">
  46.             </div><br>
  47.             <div>
  48.                 <label for="url">博&nbsp;&nbsp;&nbsp;&nbsp;客：&nbsp;&nbsp;</label>
  49.                 <input type="url" name="url" id="url">
  50.             </div>
  51.             <br>
  52.         </fieldset>
  53.         <br><br>
  54.         <fieldset>
  55.             <legend style="color:blue"><b>附加信息</b></legend>
  56.             <div>
  57.                 <label for="">兴趣爱好：</label>
  58.                 <input type="checkbox" name="hobby[]" value="sport" id="sport">体育
  59.                 <input type="checkbox" name="hobby[" id="read" value="read">读书
  60.                 <input type="checkbox" name="hobby[]" id="music" value="music">音乐
  61.                 <input type="checkbox" name="hobby[]" id="art" value="art">艺术
  62.                 <input type="checkbox" name="hobby[]" id="eat" value="eat">美食
  63.                 <input type="checkbox" name="hobby[]" id="other" value="other">其他
  64.             </div><br>
  65.             <div>
  66.                 <label for="edu">最高学历</label>
  67.                 <select name="edu" id="edu">
  68.                 <option value="" disabled selected>--请选择--</option>
  69.             <optgroup label="义务教育">义务教育
  70.                 <option value="幼儿园">幼儿园</option>
  71.                 <option value="小学">小学</option>
  72.                 <option value="初中">初中</option>
  73.             </optgroup>
  74.             <optgroup label="中等教育">
  75.                 <option value="高中">高中</option>
  76.                 <option value="中专">中专</option>
  77.             </optgroup>
  78.             <optgroup label="高等教育">
  79.                 <option value="大专">大专</option>
  80.                 <option value="本科">本科</option>
  81.                 <option value="硕士">硕士</option>
  82.                 <option value="博士">博士</option>
  83.             </optgroup>
  84.             </select>
  85.             </div><br>
  86.             <div>
  87.                 <label for="lang">精通语言</label>
  88.                 <input type="search" name="search" id="search" list="details">
  89.                 <datalist id="details">
  90.                     <option value="php">php</option>
  91.                     <option value="html">html</option>
  92.                     <option value="javascript">javascript</option>
  93.                     <option value="css">css</option>
  94.                     <option value="python">python</option>
  95.                     <option value="java">java</option>
  96.                     <option value="c++">c++</option>
  97.                     <option value=".net">.net</option>
  98.                 </datalist>
  99.             </div>
  100.         </fieldset><br><br>
  101.         <fieldset>
  102.             <legend style="color:blue"><b>其他信息</b></legend>
  103.             <div>
  104.                 <label for="avatar">上传头像：</label>
  105.                 <input type="file" name="avatar" id="avatar">
  106.             </div><br>
  107.             <div>
  108.                 <label for="sfzzm">身份证正面：</label>
  109.                 <input type="file" name="sfzzm" id="sfzzm">
  110.             </div><br>
  111.             <div>
  112.                 <label for="sfzfm">身份证反面：</label>
  113.                 <input type="file" name="sfzzm" id="sfzfm">
  114.             </div><br>
  115.             <div>
  116.                 <textarea name="jianjie" id="jianjie" cols="30" rows="10" placeholder="请输入个人简介"></textarea>
  117.             </div>
  118.         </fieldset><br>
  119.             <div>
  120.                 <button type="submit" value="提交">提交</button>
  121.             </div>
  123.     </form>
  124. </body>
  125. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：https://www.php.cn/member/courses/work.html中提交作业
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！