search

博客列表 >第0404课：html5表单控件

第0404课：html5表单控件

安静的旅途
安静的旅途原创
2020年04月06日 16:21:53721浏览

html5表单控件

1. 按钮常用属性

  1. <!--
  2.     type 属性:可点击的按钮:submit/button/reset
  3.         submit:提交按钮
  4.         button:可点击的按钮
  5.         reset:重置按钮（清除表单数据）;
  6.     autofocus属性：自动地获得焦点;
  7.     disabled属性：禁用该按钮;
  8.     form属性：提交表单ID;
  9.     formaction属性：覆盖 form 元素的 action 属性;
  10.     formmethod属性：覆盖 form 元素的 method 属性;
  11.     formtarget属性：覆盖 form 元素的 target 属性;
  12.     name属性：按钮的名称;
  13.     value属性：按钮的初始值;
  14.  -->

2.下拉列表常用属性与事件

  1. <!-- onchange="" 属性当值发生改变是触发；
  2.     onclick="alert(this.value)"，点击时触发；
  3.     autofocus：自动获得焦点；
  4.     form：指定一个或多个表单；
  5.     name：下拉列表的名称；
  6.     <optgroup>标签把相关的选项组合在一起；
  7.     <select>标签元素可创建单选或多选菜单；
  8.     -->

3. 文本域常用属性与事件

  1. <!-- onchange="alert('内容改变了')"，内容改变触发事件
  2.     onselect="this.style.color = 'red'",选中内容触发事件
  3.     name：文本区域的名称
  4.     cols：文本区域内可见的宽度
  5.     rows：文本区域内可见的行数
  6.     minlength：文本区域允许的最小字符数
  7.     maxlength：文本区域允许的最大字符数
  8.     form：文本区域所属的一个或多个表单
  9.     placeholder：简短的提示
  10.      -->

4. 表单域分组元素常用属性

  1. <!--
  2.     <fieldset>：可将表单内的相关元素分组。
  3.     name：fieldset 的名称
  4.     form; fieldset 所属的一个或多个表单
  5.     <legend>标签为 fieldset 元素定义标题
  6.  -->
  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>0404表单控件</title>
  7.     <style>
  8.         body{ width: 80%; margin: auto; display: grid; row-gap: 15px; }
  9.         .container{ width: 50%;  padding: 20px; box-shadow: 0 0 8px #888; border-radius: 10px; box-sizing: border-box; margin: auto;  background-color: lightblue; display: grid; gap:15px; }
  10.         .container > section{ display: grid; grid-template-columns: 60px 1fr; }
  11.         h3{ text-align: center; }
  12.         button{ width: 200px; height: 50px; border: none; outline: none; background-color:lightseagreen; color:white; }
  13.         button:hover{ background-color: blueviolet; cursor: pointer; }
  14.         .input_mid{ width: 200px; }
  15.     </style>
  16. </head>
  17. <body>
  18.     <form id="reg"></form>
  19.     <div class="container">
  20.         <h3>企业注册</h3>
  21.         <!-- 第一个表单分组 -->
  22.         <fieldset name="user-comm" form="reg">
  23.             <legend>设定用户名密码</legend>
  24.             <section>
  25.                 <label for="user_name">用户名：</label>
  26.                 <input type="text" id="user_name" name="user_name" placeholder="请输入用户名" form="reg" required autofocus/>
  27.             </section>
  28.             <section>
  29.                 <label for="user_email">邮箱：</label>
  30.                 <input type="email" id="user_email" name="user_email" placeholder="请填写邮箱email" form="reg" required />
  31.             </section>
  32.             <section>
  33.                 <label for="user_pwd1">密码：</label>
  34.                 <input type="password" id="user_pwd1" name="user_pwd1" placeholder="请输入密码" form="reg" required />
  35.             </section>
  36.             <section>
  37.                 <label for="user_pwd2">确认密码：</label>
  38.                 <input type="password" id="user_pwd2" name="user_pwd2" placeholder="重复您的密码" form="reg" required />
  39.             </section>
  40.         </fieldset>
  41.         <!-- 第二个表单分组 -->
  42.         <fieldset name="user-base" form="reg">
  43.             <legend>请填写企业基本信息</legend>
  44.             <section>
  45.                 <label for="ent_name">企业名称：</label>
  46.                 <input type="text" id="ent_name" name="ent_name" placeholder="请输入公司名称" form="reg" required />
  47.             </section>
  48.             <section>
  49.                 <label for="ent_id">统一社会信用代码：</label>
  50.                 <input type="text" id="ent_id" name="ent_id" placeholder="请输入统一社会信用代码" form="reg" required />
  51.             </section>
  52.             <section>
  53.                 <label for="ent_person">企业法人：</label>
  54.                 <input type="text" id="ent_person" name="ent_person" placeholder="请输入企业法人姓名" form="reg" required />
  55.             </section>
  56.             <section>
  57.                 <!-- 上传控件 -->
  58.                 <label for="ent_img">上传营业执照：</label>
  59.                 <input type="file" id="ent_img" name="ent_img" form="reg" required/>
  60.             </section>
  61.             <section>
  62.                 <label for="ent_admin">账户管理员：</label>
  63.                 <input type="text" id="ent_admin" name="ent_admin" placeholder="请输入账户管理员姓名" form="reg" required />
  64.             </section>
  65.             <section>
  66.                 <!-- 表单中的下拉列表 -->
  67.                 <label for="ent_position">职位：</label>
  68.                 <select name="ent_position" id="ent_position" form="reg">
  69.                     <optgroup label="管理层">
  70.                         <option value="董事长">董事长</option>
  71.                         <option value="总经理">总经理</option>
  72.                         <option value="高管">高管</option>
  73.                     </optgroup>
  74.                     <optgroup label="普通职工">
  75.                         <option value="前台人员" label="前台人员"></option>
  76.                         <option value="行政人员" label="行政人员"></option>
  77.                         <option value="销售人员" label="销售人员"></option>
  78.                         <option value="技术人员" label="技术人员"></option>
  79.                     </optgroup>
  80.                 </select>
  81.             </section>
  82.             <section>
  83.                 <label for="ent_mobile">手机号码：</label>
  84.                 <input type="text" id="ent_mobile" name="ent_mobile" placeholder="请输入管理人手机号码" form="reg" required>
  85.             </section>
  86.             <section>
  87.                 <!-- 文本域 -->
  88.                 <lable for="ent_range">经营范围：</lable>
  89.                 <textarea name="ent_range" id="ent_range" cols="30" rows="10" minlength="3" maxlength="200" form="reg" required></textarea>
  90.             </section>
  91.             <section>
  92.                 <!-- 预定义复合框 -->
  93.                 <label for="ent_problem">安全问题：</label>
  94.                 <input type="text" name="ent_problem" list="ent_problem"/>
  95.                 <datalist id="ent_problem">
  96.                     <option value="您小学的校名"></option>
  97.                     <option value="您的最好的朋友的名字"></option>
  98.                     <option value="您最喜欢的小学老师"></option>
  99.                     <option value="您父亲的生日"></option>
  100.                 </datalist>
  101.             </section>
  102.             <section>
  103.                 <label for="ent_answer">答案:</label>
  104.                 <input type="text" id="ent_answer" name="ent_answer" placeholder="请输入您的答案" form="reg" required>
  105.             </section>
  106.             <section>
  107.                 <label for="ent_num">安全数字：</label>
  108.                 <input type="number" id="ent_num" name="ent_num" placeholder="用于确认安全页面" min="0" max="1000" form="reg" class="input_mid" required>
  109.             </section>
  111.         </fieldset>
  112.         <!-- 隐藏域 -->
  113.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" form="reg" />
  114.         <!-- 按钮 -->
  115.         <section>
  116.             <button type="submit" form="reg" formaction="reg.php" formmethod="POST" formtarget="_blank">提交</button>
  117.         </section>
  118.     </div>
  119. </body>
  120. </html>

0404作业实例网址：http://php.wangsoo.com/html/0404/
截图展示:

作业总结：

1.<fieldset>表单分组的使用可以方便的实现分组功能，配合<legend>设置标题使用；
2.注意利用<label>标签for属性的使用，用于绑定和<input>的id属性
3.onchange="" 属性当值发生改变是触发；下拉列表和文本域的事件注意使用较为方便；
4.表单内控件，form属性可以指定一个或多个表单，做重点使用；
5.预定义复合框datalist标签的使用，搜索提醒类的功能经常回使用到，熟悉其使用方法；

上一条：表单元素：输入框下拉列表+按钮+文本域+表单域分组属性下一条：phper来啦
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多