HTML表单使用方法

Html中的form表单常用于用户信息的填写和提交,在前端开发中使用较为广泛。

form对象

建立一个form表单,提交方式method设置为邮件发送,自动填写autocomplete打开,填写验证novalidate打开

<form action="" method="post" autocomplete="on" novalidate="novalidate"></form>

label对象

属性:

  • for: 指明绑定控件的id.
  • formid: 指明所属的一个或多个表单

<label for="username">姓名:</label> <input id="username" type="text" name="username" placeholder="用户名">

text对象

注意一旦 disabled=true, POST后就没有值,对于别的空间也是

<input id="username" type="text" name="username" placeholder="用户名">

textarea对象

属性和方法:

  • rows: 显示行数. 输入超过了就下拉
  • cols: 宽度.
  • height/width: 也可以控制大小.
  • readonly: 只读的.
  • disabled: 不可用,true/false.
  • name: 名称,用于表单调用.
  • required: 必须填的.HTML5.
  • maxlength: 最大字符数
  • form: 所属的一个或多个表单.

<textarea name="comments" placeholder="ddd" cols="80" rows="20"></textarea>

password对象

<input id="password" type="password" name="password">

radio对象

属性:

  • checked: 被选中. 也用来最终获取值

<label><input name="Fruit" type="radio" value="" checked/>苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>


##checkbox对象
属性:
- checked: 被选中. 也用来最终获取值
> ```
<label><input name="Fruit1" type="checkbox" value="" checked/>苹果 </label> 
<label><input name="Fruit2" type="checkbox" value="" />桃子 </label> 
<label><input name="Fruit3" type="checkbox" value="" />香蕉 </label> 
<label><input name="Fruit4" type="checkbox" value="" />梨 </label> 

select对象

常用属性事件:

  • text: 显示内容
  • value: 具体值
  • index: 返回索引值(下拉时位置)
  • selected: 是否被选中,可以用于默认值

<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>


##hidden对象
一般用于储存一些不显示的信息,又可以通过JS进行操作修改,保存内容,被进一步调用等
> `<input type="hidden" name="country" value="Norway" />`
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 定义和用法 标签用于为用户输入创建 HTML 表单。表单能够包含input 元素,比如文本字段、复选框、单选框、...
    任少鹏阅读 568评论 0 0
  • 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的...
    柏龙阅读 173评论 0 1
  • form简介 是HTML中的一个元素,它表示文档中的一个区域,这个区域包含了交互控件,用于向web服务器提交信息。...
    七里之境阅读 1,399评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,406评论 1 41
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,102评论 0 1