html5 后台管理 表格模板 表单html5

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>