search

博客列表 >html5表单相关（input、fieldset分组、textarea、seclect预定义列表）知识点案例演示

html5表单相关（input、fieldset分组、textarea、seclect预定义列表）知识点案例演示

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年04月06日 14:04:59845浏览

作业一：实操部分

1、代码练习和演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单相关</title>
  7.     <style>
  8.       form {
  9.         width: 400px;
  10.         /* height: 400px; */
  11.         padding: 20px;
  12.         margin: auto;
  13.         background-color: #0ad4b9;
  14.         display: grid;
  15.         grid-gap: 15px;
  16.       }
  17.       form:hover {
  18.         box-shadow: 0 0 3px #616161;
  19.       }
  20.       h2 {
  21.         width: 400px;
  22.         margin: auto;
  23.         text-align: center;
  24.       }
  25.       section {
  26.         display: grid;
  27.         grid-template-columns: 80px 1fr;
  28.       }
  29.       section:last-child {
  30.         display: grid;
  31.         grid-template-columns: 1fr 1fr;
  32.       }
  33.       button {
  34.         height: 30px;
  35.         width: 60px;
  36.         border: none;
  37.         outline: none;
  38.         background-color: lightblue;
  39.         margin: auto;
  40.       }
  41.       button:hover {
  42.         background-color: red;
  43.         color: white;
  44.       }
  46.       fieldset > .other {
  47.         display: grid;
  48.         grid-template-columns: 80px repeat(6, 1fr);
  49.       }
  50.       legend {
  51.         text-align: center;
  52.       }
  53.       textarea {
  54.         width: 300px;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <h2>用户登陆</h2>
  60.     <form action="login.php" method="POST">
  61.       <section>
  62.         <label for="username">用户名：</label>
  63.         <input
  64.           type="text"
  65.           id="username"
  66.           name="username"
  67.           placeholder="用户名"
  68.           required
  69.           autofocus
  70.         />
  71.       </section>
  72.       <section>
  73.         <label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label>
  74.         <input
  75.           type="password"
  76.           id="pwd"
  77.           name="password"
  78.           placeholder="不少于6位密码"
  79.           required
  80.         />
  81.       </section>
  82.       <section>
  83.         <button type="submit">登陆</button>
  84.         <button type="reset">重置</button>
  85.       </section>
  86.     </form>
  87.     <hr />
  88.     <h2>用户注册</h2>
  89.     <form action="" enctype="multipart/form-data">
  90.       <fieldset>
  91.         <legend>基本信息</legend>
  92.         <section>
  93.           <label for="username">用户名：</label>
  94.           <input
  95.             type="text"
  96.             id="username"
  97.             name="username"
  98.             placeholder="用户名"
  99.             required
  100.           />
  101.         </section>
  102.         <section>
  103.           <label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label>
  104.           <input
  105.             type="password"
  106.             id="pwd"
  107.             name="password"
  108.             placeholder="不少于6位密码"
  109.             required
  110.           />
  111.         </section>
  112.         <section class="other">
  113.           <label for="">性别:</label>
  114.           <input type="radio" name="sex" value="1" />男
  115.           <input type="radio" name="sex" value="0" checked />女
  116.           <input type="radio" name="sex" value="2" />保密
  117.         </section>
  118.       </fieldset>
  119.       <fieldset>
  120.         <legend>德智体美</legend>
  121.         <section class="other">
  122.           <label for="">爱好：</label>
  123.           <input type="checkbox" name="like[]" value="" checked />跑步
  124.           <input type="checkbox" name="like[]" value="" checked />游泳
  125.           <input type="checkbox" name="like[]" value="" />玩游戏
  126.         </section>
  127.         <section>
  128.           <label for="">特长</label>
  129.           <input type="text" list="course" name="course" />
  130.           <datalist id="course">
  131.             <option value="html">html</option>
  132.             <option value="css">css</option>
  133.             <option value="javascript">javascript</option>
  134.           </datalist>
  135.         </section>
  136.         <section>
  137.           <label for="php">科目</label>
  138.           <select name="php" id="php">
  139.             <optgroup label="前端">
  140.               <option value="html">html</option>
  141.               <option value="css">css</option>
  142.               <option value="javascript">javascript</option>
  143.             </optgroup>
  145.             <optgroup label="后端">
  146.               <option value="php" label="php"></option>
  147.               <option value="composer" label="composer" selected></option>
  148.               <option value="laravel">laravel</option>
  149.             </optgroup>
  150.           </select>
  151.         </section>
  152.         <section>
  153.           <label for="">头像：</label>
  154.           <input type="hidden" name="MAX_FILE_SIZE" value="800000" />
  155.           <input type="file" name="" id="" />
  156.         </section>
  157.         <section>
  158.           <label for="">图片域：</label>
  159.           <input type="image" src="dy.png" width="80px" height="30px" />
  160.         </section>
  162.         <section>
  163.           <h4>个人介绍</h4>
  164.           <textarea
  165.             name=""
  166.             id=""
  167.             cols=""
  168.             rows="10"
  169.             placeholder="自我介绍……"
  170.           ></textarea>
  171.         </section>
  172.       </fieldset>
  173.       <section>
  174.         <button
  175.           type="submit"
  176.           formaction="login"
  177.           formmethod="POSt"
  178.           formtarget="_blank"
  179.         >
  180.           登陆
  181.         </button>
  182.         <button type="submit" formaction="">发送</button>
  183.       </section>
  184.     </form>
  185.   </body>
  186. </html>

2、代码运行结果图

作业：总结

1、相关知识总结
1、表单相关常见标签：
表单：<form></form>、
控件：<label></label>和<input/>、
按钮：<botton></botton>、
自定义列表：<select><optgroup label="分组"><option>自定义列表项<option/><optgroup></select>、
预定义输入：<input list="course"/>和<datalist id="course"> <option>预定义选项</option></datalist>
分组标签：<fieldset></fieldset>和<legend></legend>
2、表单相关属性：
a、form: action=”请求处理地址”，method=”请求发送方式（GET|POST）”,target=”打开方式（_blank）” ,name=”表单名称”,enctype=”application/x-www-form-urlencoded | multipart/form-data”
b、input: type=”控件类型见c项”、name=”空间名字”，value=”控件值”，form=”空间所属表单”，placeholder=”提示信息占位符（text和password）”, autofocus:自动获取焦点，checked:默认选项（radio和checkbox）等等
c、input空间类型：text password radio checkbox file image hidden email data和datatime-local tel url number range(范围拖动条) search color等
d、button type=”submit|reset|button”,name=”名字”，value=”按钮文本值”，form相关属性：formaction和form……
e、select : name=”请求参数名称”，multiple:是否多选（布尔值） size=”允许显示的列表数量”
3、表单相关事件：

序号 事件属性 描述
1 onfocus 获取焦点时触发
2 onblur 失去焦点时触发
3 onchange 失去焦点,且值发生变化时触发
4 oninput 值发生变化(不等失去焦点)时触发
5 onkeydown 按下键盘时触发
6 onkeyup 抬起键盘时触发
7 onclick 鼠标单击时触发
8 onselect 选择内容文本时触发
上一条：11期0405作业下一条：HTML基础之按钮，下拉列表，文本域，表单域的常用属性与课后总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多