form 表单

form表单中的内容,提交后都是 key:value 的形式

  • type="text" 表示输入文本(type="password" 表示密码输入框,其他与 type="text"相同)

<input type="text" name="user" placeholder="请输入用户名" maxlength="10">
  • placeholder 表示输入框中的提示。
  • maxlength 表示最大输入长度(字符)。
  • type="radio" 表示单选按钮。一定要有 name 和 value 属性

    <input type="radio" name="sex" value="man" checked>
  • name 用来区分是否是同一组单选按钮。
  • value 后台接收的值。
  • checked 表示该按钮被选中。
  • type="checkbox" 表示多选框。 如果 name 设为不同,那么可以省略 value (不建议)

    <input type="checkbox" name="hobby" value="ball" checked>
  • 如果 name 不同,value可以省略。
  • value 是后台接收的值。
  • checked 表示该选项被选中。
    但是,如果选项很多,name就需要很多,所以用数组表示
    <input type="checkbox" name="love[0]" value="ball" checked>
    <input type="checkbox" name="love[1]" value="ball" checked>
    <input type="checkbox" name="love[2]" value="ball" checked>

如果省略value,后台得到的是 name:on。

  • type="submit" 表示提交按钮

    <input type="submit"  value="提交">
  • value 是按钮的内容。不写,内容默认为“提交”。
  • type="hidden" 表示隐藏域

    <input type="hidden"  name ="url_delete" value="index.php">

会向 value 中的地址发请求,隐藏域主要用于

  • 1.缓存数据
  • 2.安全校验(后台生成一个值给页面,页面再次提交时,对比 value 值是否相同来进行校验)

另外,所有的 input 标签都可以通过 disabled 来禁止。 input 有 focus 状态。

需要强调的是,所有的 input 都要有 name 属性。

  • textarea 标签,表示文本域

    <textarea name="user" placeholder="请输入用户名" maxlength="10"></textarea>

属性的效果和 type="text" 的相同

再说一下下拉菜单 select 标签

select 标签一定要有 name 属性
option 标签一定要有 value 属性

    <select name="sport">
        <option value="basketball" selected >basketball</option>
        <option value="football">football</option>
        <option value="baseball">baseball</option>
    </select>

提交后,后台的结果为 sport:basketball

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 933评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,127评论 19 139
  • 1.动手 form 表单table 表格 2. <form>表单元素 1) 简述: 元素是块级元素,其开始标签和结...
    _Dot912阅读 2,069评论 2 8
  • 一.什么是< form>表单 格式: 作用:form表单一般用来收集用户的信息,并把信息传送到后台。 注意点:1....
    饥人谷_刘冲阅读 2,791评论 0 1
  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,252评论 3 17