您的位置:首页 > Web前端 > HTML5

HTML5 表单

2019-05-13 08:25 836 查看

HTML5 表单

1、表单作用
  收集用户的信息并提交给服务器
2、表单的要素
  form元素:收集用户的信息
  表单控件:可以与用户进行数据交互的可视化组件

form元素 <form></form>

属性 取值 说明
action 地址值 提交给服务器处理程序的地址,默认提交本页
method
get 向服务器要数据,显式提交,大小不超过2KB,默认值
post 提交给服务器处理,隐式提交,无数据大小限制
enctype
application/x-www-form-unlencoded 允许所有的文本数据提交给服务器,默认值
multipart/form-data 允许将文件提交给服务器
text/plain 允许将普通字符提交给服务器,特殊字符不行

表单控件

  只有放在<form>中才能提交服务器

1、文本框 和 密码框

  文本框:<input type=‘text’>
  密码框:<input type=‘password’>

属性 取值 说明
name 字符串 为控件起名,在服务器上使用
value
字符串 控件上所显示的值
maxlength
数值 限制输入的最大字符数
placeholder
字符串 提示的占位符
2、按钮

  1、提交按钮 <input type=‘submit’>
  2、重置按钮 <input type=‘reset’>
  3、普通按钮 <input type=‘button’>

属性 说明
value 字符串 设置按钮上的文字
3、单选按钮 和 复选框

  1、单选按钮 <input type=‘radio’>
  2、复选框 <input type=‘checkbox’>

属性 说明
name 字符串 定义名称,并分组
value 字符串 定义控件的值
checked 设置预选中,该属性无值
4、隐藏域 和 文件选择框

  1、隐藏域:提交给服务器但不显示给用户 <input type=‘hidden’>

属性 说明
name 字符串 定义名称
value 字符串 定义控件的值

  2、文件选择框 <input type=‘file’ method=‘post’ enctype=‘multipart/form-data’>

属性 说明
name 字符串 定义名称

  注意:文本选择框的表单method值一定为post,且enctype值为multipart/form-data

5、多行文本域

  多行文本域: <textarea> </textarea>

属性 说明
name 字符串 定义名称
cols 数值 指定文本域的列数(文本框宽度)
rows 数值 指定文本域的行数(文本框高度)
6、下拉选项框

  1、下拉选项框:<select> </select>
  2、选项标记:<option> </option>

标签 属性 说明
<select> </select> name 字符串 定义名称
<option> </option> value 字符串 提交服务器的内容
<form action="login" method="post" enctype="multipart/form-data">
<p>  <!-- 文本框 -->
用户名称
<input type="text" name="uname" maxlength="12" placeholder="请输入用户名">
</p>
<p>   <!-- 密码框 -->
用户密码
<input type="password" name="upwd" placeholder="请输入密码">
</p>
<p>  <!-- 按钮 -->
<input type="submit">
<input type="reset">
<input type="button" value="返回">
</p>
<p>  <!-- 单选按钮 -->
性别:
<input type="radio" name="sex" value="m">男
<input type="radio" name="sex" value="w">女
<input type="radio" name="sex" value="x" checked>保密
</p>
<p>  <!-- 复选框 -->
爱好:
<input type="checkbox" name="hobby" checked>游泳
<input type="checkbox" name="hobby">看书
<input type="checkbox" name="hobby">旅游
</p>
<p>  <!-- 隐藏域 -->
<input type="hidden" name="uid" value="123456789">
</p>
<p>  <!-- 文本选择框 -->
上传头像:
<input type="file" name="hphoto">
</p>
<p>  <!-- 多行文本域  -->
<textarea name="info" cols="30" rows="10"></textarea>
</p>
<p>  <!-- 下拉选项框  -->
选择城市
<select name="city" >
<option value="BJ">北京</option>
<option value="TJ">天津</option>
<option value="SH">上海</option>
<option value="CQ">重庆</option>
</select>
</p>
</form>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: