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