博客列表 >前端知识之表单运用以及写代码技巧

前端知识之表单运用以及写代码技巧

失忆孤独患者
失忆孤独患者原创
2023年03月14日 19:05:54321浏览

书代码 钱需要必学习的知识
结构!
内容{text}
属性[attr] #id .class
重复*
父子>
兄弟 +
父级^
分组(emment)
序号$
倒叙@$
method 提交方式
action 提交地址
<form action="post.php" method="get">
<fieldset style="display: inline-block; gap: 1em;">
<legend>表单标题</legend>
<div class="username">
<label for="tex">文本框
<!-- placeholder 提示属性 -->
<input type="text" name="name" id="tex" value="默认值" placeholder="提示信息">
</label><br>

  1. <label for="psw"></label>密码框
  2. <input type="password" id="psw"><br>
  3. <label for="eal"> email邮件
  4. <!--
  5. autofocus 页面加载自动聚焦
  6. required 必填 不写不能提交-->
  7. <input type="email" name="" id="eal" autofocus required>
  8. </label><br>
  9. <label for="ckx">多选框
  10. <!-- name值不能相同
  11. name值[] 这样就可以把值写成一样
  12. -->
  13. <input type="checkbox" name="layout" id="ckx">旅游
  14. <input type="checkbox" name="bianca" id="ckx">编程
  15. <input type="checkbox" name="shewing" id="ckx">摄影
  16. </label><br>
  17. <label for="rd">单选框
  18. <!-- checked 默认选中 -->
  19. <input type="radio" checked id="rd" name="male">
  20. <input type="radio" checked id="rd" name="male">
  21. <input type="radio" checked id="rd" name="male">
  22. </label><br>
  23. <label for="btn">提交
  24. <input type="submit" id="btn" value="提交">
  25. <button>提交</button>
  26. <button disabled="disabled">失效</button>
  27. </label><br>
  28. <label for="age">年龄
  29. <input type="number" id="age" min="18" max="35">
  30. </label><br>
  31. <label for="dt">
  32. <input type="date" id="dt" value="" min="1994-11-01" max="2994-10-01"> 生日
  33. </label><br>
  34. </div>
  35. <div>
  36. <label for="set">学历</label>
  37. <select name="edu" id="set">
  38. <option value="0" selected>--请选择--</option>
  39. <!-- selected 属性作用是默认选中 -->
  40. <option value="1">初中</option>
  41. <option value="2">高中</option>
  42. <option value="3" >大学</option>
  43. </select>
  44. </div>
  45. </fieldset>
  46. </form>
  47. ![](https://img.php.cn/upload/image/922/202/180/1678791899235603.jpg)
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议