欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML表单、选择器学习与应用

程序员文章站 2022-03-13 12:48:42
...

表单、选择器学习与应用

1. 表单元素

  1. <fomr action="cs.php" method="post"></fomr>
  2. /*表单容器*/
  3. /*action=""提交文件*/
  4. /*method=""传输类型get(明文)、post(密文)*/
  5. /*onsubmit="return false;" 禁用原有表单验证*/
  6. <fieldset>/*表单分组*/
  7. <lebel></lebel>/*分组标题*/
  8. </fieldset>
  9. <label for=""></label>/*绑定input获取焦点*/
  10. <button></button>/*按钮*/
  11. /*type="reset" 重置 */
  1. <input type="">/*表单元素*/
  2. /*type="text" 文本输入属性*/
  3. /*type="passwoed" 不显示文本的属性,多用于密码输入 */
  4. /*type="email" 邮箱属性,输入验证*/
  5. /*type="radio" 单选按钮 */
  6. /*type="checkbox" 多选按钮 */
  7. /*placeholder="" 内容提示属性 */
  8. /*required 验证输入框是否为空*/
  9. /*autofocus 默认获取焦点*/
  10. /*checked 默认选择*/
  1. <section name="">/*下拉选择容器*/
  2. <option value=""></option>/*下拉选择项*/
  3. </section>
  4. <datalist id="">/*自定义选择下拉容器,id与input中list="" 属性绑定*/
  5. <option value=""></option>/*下拉选择项*/
  6. </datalist>

表单元素应用

简单用户注册页面实现

  1. <h3>用户注册</h3>
  2. <form action="zc.php" method="post" onsubmit="return false;">
  3. <fieldset>
  4. <legend>必填项</legend>
  5. <div>
  6. <label for="user">账号:</label>
  7. <input type="text" id="user" name="user" placeholder="请输入账号" required autofocus/>
  8. </div>
  9. <div>
  10. <label for="paw">密码:</label>
  11. <input type="password" id="paw" name="paw" placeholder="密码不能少于6位" required />
  12. </div>
  13. <div>
  14. <label for="eml">邮箱:</label>
  15. <input type="email" id="eml" name="eml" placeholder="dome@eml.com">
  16. </div>
  17. </fieldset>
  18. <div>
  19. <label for="baomi">性别:</label>
  20. <input type="radio" name="gender" id="male" ><label for="male"></label>
  21. <input type="radio" name="gender" id="female" ><label for="female"></label>
  22. <input type="radio" name="gender" id="baomi" checked><label for="baomi">保密</label>
  23. </div>
  24. <div>
  25. <label >爱好:</label>
  26. <input type="checkbox" name="aihao[]" id="music" value="music"><label for="music">音乐</label>
  27. <input type="checkbox" name="aihao[]" id="Pgames" value="Pgames"><label for="Pgames">打游戏</label>
  28. <input type="checkbox" name="aihao[]" id="movie" value="movie"><label for="movie">看电影</label>
  29. </div>
  30. <div>
  31. <select name="huiyuan">
  32. <option value="普通会员">普通会员</option>
  33. <option value="超级会员">超级会员</option>
  34. <option valer="永久会员">永久会员</option>
  35. </select>
  36. </div>
  37. <div>
  38. <label >搜索关键词:</label>
  39. <input type="search" id="" name="search" list="search">
  40. <datalist id="search">
  41. <option value=""></option>
  42. <option value="php学习">php学习</option>
  43. </datalist>
  44. </div>
  45. <button>提交</button>
  46. <button type="reset">重置</button>

HTML表单、选择器学习与应用

2. CSS样式与选择器

通用属性选择器

  1. class=""
  2. style=""
  3. id=""

1.选择器之间的优先级:
!important > style > id > class > tag

2.id > class > tag 之间的组合应用
数值越大优先级越高,优先级高覆盖优先级低的。

  1. /*tag 个*/
  2. html body h3{background: darkkhaki;} 3
  3. body h3{background: darkgrey;} 2
  4. h3{background: darkgreen;} 1
  5. /*class 十*/
  6. body h3.teite{background: rgb(185, 147, 204);} 3
  7. h3.teite{background: darkorchid;} 2
  8. .teite{background: darkorange;} 1
  9. /*id 百*/
  10. body h3#a{background: rgb(156, 52, 18);} 3
  11. h3#a{background: darksalmon;} 2
  12. #a{background: darkred;} 1

3.样式上下文选择器

  1. /*子类选择器: > */
  2. .les3 >li{}
  3. /*子孙类选择器: 空格 */
  4. .les3 li{}
  5. /*相邻选择器:+ */
  6. .les3 .a li{}
  7. /*相邻下面所有选择器:~ */
  8. .les3 .a ~{}

应用:

  1. /*css*/
  2. .lest3 > li{border: 1px solid #777;}
  3. .lest3 li{border: 1px solid #777;}
  4. .lest3 .item + * {background: darksalmon;}
  5. .lest3 .item ~ * {background: #a1dda6;}
  6. /*html*/
  7. <ul class="lest3">
  8. <li >lest-1</li>
  9. <li class="item">lest-2
  10. <ul>
  11. <li>lest-2</li>
  12. <li>lest-2</li>
  13. <li>lest-2</li>
  14. </ul>
  15. </li>
  16. <li >lest-3</li>
  17. <li >lest-4</li>
  18. <li >lest-5</li>
  19. <li >lest-6</li>
  20. <li >lest-7</li>
  21. <li >lest-8</li>
  22. </ul>

HTML表单、选择器学习与应用
常用样式

  1. background:;/*背景*/
  2. color: cornsilk;/*颜色*/
  3. width: 200px;/*长度*/
  4. height: 60px;/*高度*/

样式应用

  1. <style>
  2. .teite{background: chocolate;color: cornsilk;width: 200px;height: 60px;}
  3. </style>
  4. <h3 class="teite" style="" id="">正是一个CSS样式</h3>

HTML表单、选择器学习与应用