HTML表单_html/css_WEB-ITnose-html教程-PHP中文网

增加管理员

首页

web前端

html教程

HTML表单_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

html表单

HTML表单总结：供大家夯实基础

表单中一般需要嵌套表格。改变表格中的行就是表单，表单主要用于收集用户信息

表单的常用属性：

method：指出表单数据的提交方式

enctype：指出表单数据的编码方式

action：表单提交的URL

表单的元素

1:文本框：密码框

文本框：<input type="text"/>密码框：<input type = "password"/>

登录后复制

主要属性

value属性：由访问者只有输入任何文本框

maxlength属性：限制输入的字符数

readonly属性：设置文本控件只读

2:按钮

提交按钮：

重置按钮：

提交按钮：<input type ="submit"/>重置按钮：<input type = "reset"/>

登录后复制

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body>    <form method ="post">        <h1 id="nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-增加管理员">           &nbsp   &nbsp        增加管理员        </h1>        <table width ="600px">            <tr>                <td width ="80px">姓名：</td>                <td width = "180">                <input name ="UserName"/>                </td>                <td>10个字符以内的字母或下划线组合</td>            </tr>            <tr>                <td>密码：</td>                <td><input type="password"maxlength = 6 name="pwd"/></td>                <td>6位数字</td>            </tr>            <tr>                <td>重复密码：</td>                <td><input type="password" maxlength = 6/></td>                <td>2次密码必须相同</td>            </tr>            <tr>                <td></td>                <td>                <input type="submit"/>   &nbsp                <input type="reset">                </td>                <td></td>            </tr>        </table>    </form> </body></html>

登录后复制

代码运行效果：

3：单选框并扩大选中区域：

<tr>                <td>性别:</td>                <td><input id = "radmal" type ="radio" name="gender" value = "mal"> <label for = radmal>男士</label></td>                <td><input id = "radfe" type ="radio" name="gender" value = "mal" checked> <label for = radfe>女士</label></td>            </tr>

登录后复制

代码效果：

4:checkbox:多选框

当input为checkbox时候，文本框为多选框

<tr>                <td width = "150px"><input id = "chbbox" type ="checkbox" name="gender" value = "mal" > <label for = chbbox>学生管理员</label></td>                <td><input id = "chbadm" type ="checkbox" name="gender" value = "mal" > <label for = chbadm>超级管理员</label></td>                <td><input id = "chbtech" type ="checkbox" name="gender" value = "mal" > <label for = chbtech>管理员</label></td>                </tr>

登录后复制

程序截图：

复选框：

复选框主要用于选项很多的时候，selected默认选项

<tr>                    <td>状态</td>                <td>                <select name = "status">                    <option value = "1">在线</option>                    <option value = "0">离线</option>                    <option value = "-1" selected>忙碌</option>                </select>                </td>                <td></td><tr>

登录后复制

程序截图：

多选列表：在多选框中增加multiple size 即可

<tr>                <td>所属中心：</td>                <td>                    <select name="center" multiple size = "5">                        <option value = "zgc">中关村</option>                        <option value = "xjh">徐家汇</option>                        <option value = "dmh">大明湖</option>                        <option value = "ztf">总统府</option>                        <option value = "bsh">宝山寺</option>                        <option value = "hmt">画眉潭</option>                        <option value = "ryt">日月潭</option>                    </select>                </td>                <td></td></tr>

登录后复制

文件控件：

头像：
选择文件

文本域：

备注：

<tr>                <td>备注：</td>                <td><textarea style = "width:200px;height:80px;resize:none"></textarea><td/>                </tr>

登录后复制

程序效果图：

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7350

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，