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" />`