首页 > 代码库 > html表单代码演示
html表单代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> <!-- <form method="post" action="server.html"> <input type="text" name="username1"/> <input type="password" name="passwd"/> <input type="submit" value="http://www.mamicode.com/提交" /> </form>--> <form method="get" action="server.html"> <!--(只有在form表单时有效)name:提交表单时此文本框的值value存储在name变量中,并传给后台服务器,我们可以通过请求头信息查看--> 文本标签1：<input type="text" value="http://www.mamicode.com/zhangsan" maxlength="5" name="u1" tabindex="5"/><br/> 文本标签2：<input type="text" value="http://www.mamicode.com/zhangsan" maxlength="5" name="u2" tabindex="3"/><br/> 文本标签3：<input type="text" value="http://www.mamicode.com/zhangsan" maxlength="5" name="u3" tabindex="2"/><br/> 文本标签4：<input type="text" value="http://www.mamicode.com/zhangsan" maxlength="5" name="u4" tabindex="1"/><br/> 文本标签5：<input type="text" value="http://www.mamicode.com/zhangsan" maxlength="5" name="u5" tabindex="4"/><br/> <!-- 按钮标签：<input type="button" value="http://www.mamicode.com/注册" name="btn"/><br/> 图片标签：<input type="image" value="http://www.mamicode.com/图片" name="img"/><br/> --> <hr/> <!--input disabled 禁用 ,不光这个输入框不能使用，且值也不能传输到服务器,tabindex也不起作用--> <input type="text" disabled="disabled" name="disabled" value="http://www.mamicode.com/dsiabled" /><br/> <!--input readonly 只读 只是输入框不能操作修改，但是值能传输到服务器 ,tabindex起作用 --> <input type="text" readonly="readonly" name="readonly" value="http://www.mamicode.com/readonly" /><br/> <!--input type="password"--> <input type="password" value="http://www.mamicode.com/123456"/><br/><hr/> <!--textarea:文本区 多行文本输入框 一个中文字符占两列， 在没超过指定行数的时候,可能会看到输入的列数多一列字的效果，不同浏览器，效果不同 特点：没有value属性，内容是初始化在标签之间 没有maxlength属性 使用rows和cols属性指定行数和列数。 注意：6行6列的多行文本框，在不显示滚动条的情况下最多显示36个英文字符，或者18个中文字符。 --> <textarea rows="6" cols="6" maxlength="20" name="textarea">qwer</textarea><br/> <!--select 列表框 selected属性 是设置默认值，即被选中的值 --> <select name="select"> <option value="http://www.mamicode.com/china">中国</option> <option value="http://www.mamicode.com/USA">美国</option> <option value="http://www.mamicode.com/UK" selected="selected">英国</option> </select> <select> <option value="http://www.mamicode.com/hp">黄埔</option> <option value="http://www.mamicode.com/pd">浦东</option> <option value="http://www.mamicode.com/xh">徐汇</option> </select><br/> <!--optgroup 对选项分组--> <select> <optgroup label="上海"> <option>外滩</option> <option>南京东路</option> <option>东明明珠塔</option> </optgroup> <optgroup label="合肥"> <option>逍遥津</option> <option>地质博物馆</option> <option>植物园</option> </optgroup> </select><br/> <select size="5" multiple="multiple"> <option>上海</option> <option>北京</option> <option>天津</option> <option>深圳</option> <option>广东</option> <option>常州</option> <option>温州</option> <option>厦门</option> </select><br/> <!--单选按钮--> 男:<input type="radio" value="http://www.mamicode.com/man" name="sex"/> 女:<input type="radio" value="http://www.mamicode.com/woman" name="sex"/><br/> <!--多选框 checkbox--> 爱好：<input type="checkbox" value="http://www.mamicode.com/basketball" name="hobby">篮球 <input type="checkbox" value="http://www.mamicode.com/Songs" name="hobby">听歌 <input type="checkbox" value="http://www.mamicode.com/playComputer" name="hobby">玩电脑 <input type="checkbox" value="http://www.mamicode.com/sing" name="hobby">唱歌 <input type="checkbox" value="http://www.mamicode.com/run" name="hobby">跑步<br/> <!--一般按钮--> <input type="button" value="http://www.mamicode.com/一般按钮"/><br><hr> <!--图片按钮--> <input type="image" src="http://www.mamicode.com/img/111.jpg" alt="图片按钮" style="width: 50px;height: 50px;" title="美女图片"/><br/><br/> <!--隐藏类型 hidden只是在页面中不显示，用户看不见，但不代表没有，传给服务器的时候，数据仍传送 --> <input type="text" value="http://www.mamicode.com/nohidden"/> <input type="hidden" value="http://www.mamicode.com/hidden" name="hidden" />hidden跑哪去了<br/> <!--for标签--> <label for="man">男:</label><input type="radio" value="http://www.mamicode.com/man" name="sex" id="man"/> <label for="woman">女:</label><input type="radio" value="http://www.mamicode.com/woman" name="sex" id="man"/><br/> <br/> <!--分组框fieldset--> <fieldset style="width:280px"> <legend>QQ注册</legend> <ul style="list-style: none;"> <li><label for="username">用户名:</label><input type="text" name="username" id="username"/></li> <li><label for="password">密 码:</label><input type="password" name="password" id="password"/></li> </ul> <ol style="list-style: none;"> <li><label for="username">用户名:</label><input type="text" name="username" id="username"/></li> <li><label for="password">密 码:</label><input type="password" name="password" id="password"/></li> </ol> </fieldset> <!-- <fieldset style="width:280px"> <legend>QQ注册</legend> <div> <label for="username">用户名:</label><input type="text" name="username" id="username" style="margin-left: 1px;"/> </div> <div> <label for="password">密 码:</label><input type="password" name="password" id="password" style="margin-left:3px"/> </div> </fieldset> --> <fieldset style="width:280px"> <legend>QQ登录</legend> <table> <tr> <td><label for="username">用户名:</label></td> <td><input type="text" name="username" id="username"/></td> </tr> <tr> <td><label for="password">密 码:</label></td> <td><input type="password" name="password" id="password"/></td> </tr> </table> </fieldset> <fieldset style="width:320px;height:187px;margin-left: 530px;"> <legend>QQ上线</legend> <div style="margin-left: 41px;margin-top: 50px;"> <label for="username2">用户名:</label><input type="text" name="username2" id="username2"/> </div> <div style="margin-left: 41px;margin-top: 6px;"> <label for="password2">密码:</label><input type="password" name="password2" id="password2" style="margin-left: 16px;"/> </div> </fieldset> <br/><hr/> <frameset cols="200px,20%,*"> <frame src="http://www.mamicode.com/#"/> <frame src="http://www.mamicode.com/#"/> <frame src="http://www.mamicode.com/#"/> </frameset> <br/><input type="submit" value="http://www.mamicode.com/提交" /> <input type="reset" value="http://www.mamicode.com/重置"/> </form> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> <h1>这里是服务器接受页面！！！</h1> </body> </html>
html表单代码演示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。