当前位置:   article > 正文

Web前端Html的表单

Web前端Html的表单

表单的关键字:

form标签表示一个表单区域

action=“后端地址”
method=“提交数据方式:get/post”
input 单行输入框
type=“text” 文本
name=“定义名称 名字自定义” 向后端提交的键
readonly=“readonly” 只读,不可修改,但是可以提交
disabled=“disabled” 禁用组件不可修改,不能提交
type=“password” 密码框
type=“radio” 单选框

  1. <body>
  2. <form method="get" >
  3. <p align="center" class="c1">欢迎注册</p>
  4. <table align="center">
  5. <tr>
  6. <td align="right" class="c2">用户名:</td>
  7. <td><input type="text" name="account"/></td>
  8. </tr>
  9. <tr>
  10. <td align="right" class="c2">密码:</td>
  11. <td><input type="password" name="password"/></td>
  12. </tr>
  13. <tr>
  14. <td align="right" class="c2">
  15. 性别:
  16. </td>
  17. <td><input type="radio" name="gender" value="男"/>
  18. <input type="radio" name="gender" value="女"></td>
  19. </tr>

checkbox 多选

cols列 rows行
type=“flie” 文件选择框
type=“submit” 提交按钮 触发表单的提交动作
type=“reset” 重置按钮
type=“button” 普通按钮 onclick相当于监听按下动作后执行""中的东西11111x

  1. <tr>
  2. <td align="right" class="c2">电话:</td>
  3. <td><input type="phonenum" name="phonenum"/></td>
  4. </tr>
  5. <tr>
  6. <td align="right" class="c2">
  7. 职业:
  8. </td>
  9. <td>
  10. <select name="job">
  11. <option value="100">学生</option>
  12. <option value="100">老师</option>
  13. <option value="100">其他职业</option>
  14. </select>
  15. </td>
  16. </tr>
  17. <tr>
  18. <td align="right" class="c2">
  19. 爱好:
  20. </td>
  21. <td>
  22. <input type="checkbox" name="hobby" >敲代码
  23. <input type="checkbox" name="hobby" > 打游戏
  24. <input type="checkbox" name="hobby"> 唱歌
  25. <input type="checkbox" name="hobby"> 运动
  26. </td>
  27. </tr>
  28. <tr>
  29. <td align="right" class="c2">
  30. 地址:
  31. </td>
  32. <td>
  33. <textarea name="address" rows="2"></textarea>
  34. </td>
  35. </tr>
  36. </table>
  37. <p align="center" class="c1">填写完成后点击下面提交按钮提交表单</p>
  38. <p align="center">
  39. <input type="submit" vaule="提交"/>
  40. <input type="reset" value="重置"/>
  41. </p>
  42. </form>

 

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号