收集用户目标信息
在HTML中,一个完整的表单由表单域、表单控件(即表单信息)、提示信息组成
一个包含表单元素的区域,用来收集用户信息
html<form action="服务器脚本HRL地址" method="提交方式" name="表单域名称">
...
</form>
属性 | 属性值 | 作用 |
---|---|---|
name | 自定义 | 定义input元素的名称 |
value | 自定义 | 规定input元素的默认值 |
checked | checked | 规定此input元素首次加载时默认被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度【用的较少,一般使用正则表达式】 |
placeholder | 文本占位符 | |
type | 指定类型、email-邮件、text-文本、password-密码 |
value 属性对于不同 input 类型,用法也不同:
注意:value 属性对于<input type="checkbox"> 和 <input type="radio"> 是必需的
注意:value 属性不适用于 。
html<form>
<input type="txt" placeholder="默认展示文本">
</form>
type取值为:text-文本框、password-密码框【浏览器会 以星号或小圆点隐藏密码】
html<form>
<input type="password">
</form>
按钮必须具有同一个name值【不然有重复选择错误】实现多选一的效果
html<form>
男 <input type="radio" name="gender">
女 <input type="radio" name="gender">
</form>
实现多选效果
html<form>
<input type="checkbox">
</form>
将表单域中的值提交到服务器
html<form>
<input type="submit" value="提交默认文本替换文本">
</form>
使用value可以替换默认的提交文本
删除所有表单数据,重置表单域内容,恢复到初始状态
html<form>
<input type="reset" value="重置按钮文本">
</form>
点用后不会提交文件,常搭配js使用
html<form>
<input type="button" value="获取网站验证码登录">
</form>
上传文件时使用
html<form>
<input type="file" value="获取网站验证码登录">
</form>
label标签用于绑定一个表单元素,当点击标 签内的文本时,浏览器将自动将焦点转到对应的元素上 ,以此增加用户体验
label标签的for属性值指向input的id属性值
html<form>
<label for="gender">男</label>
<input type="txt" id="gender">
</form>
表单中填写时下拉列表
html<form>
籍贯
<select>
<optgroup label="中国">
<option selected="hb"value="hubei">湖北</option>
...
</select>
<optgroup label="国外">
...
</form>
定义多行文本输入
当用户输入文本过多的情况下不建议使用input标签,而应该使用textarea文本域标签【如:评论、留言板等】
html<form>
<textarea cols="n" rows="b">
</textarea>
</form>
本文作者:RKLS
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!