博客内容包含form标签相关介绍，模拟百度和360搜索，以及注册页面的内容，转载自特定链接。主要围绕前端页面构建相关信息技术展开。
一、form标签（一）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 10 form标签</title> </head> <!--作用是收集并提交用户数据给指定的服务器 form会收集标签内部的数据，外部的不要 action：数据表示提交给谁 也就是url method: 有get(适合少量数据,表单数据以？隔开 ,不同键值对用&隔开 ) post 适合大量数据,安全,隐藏提交 表单域：给用户提供可以进行书写和选择的标签 在点击数据提交时 ,form标签会将内部的所有数据按照method中指定的方式提交给action中指定的地址 表单中提交的是各种input中的value的值 1、文本框 如登录页面 2、单选框 type值是：radio 属性值是：sex 只能选择一个 ;checked 设置一个初始默认值,一进入网页性别默认是男 3、多选框 checkbox 一个多选组需要相同的name属性 ;value要提交给数据库存储的,要不同; checked 默认选择 4、下拉框 name：数据提交的键名,必须指定 option:表示一个下拉选项；select selected 是默认选项; 5、文本域 textarea 当前可以更改框的大小 ，声明一个可以书写大量文字的框 css和js都会用到 rows和cols声明行和列数 6、普通按钮 不具有数据提交功能 7、隐藏标签 一些数据不能给用户看，但是必须随着用户数据的提交而提交 --> <body> <form action="#" method="get"> <!--name的作用就是给数据进行描述，让数据库后台指定数据是干啥的,必须赋值，否则submit不会提交，因为他是无效数据 提交数据为键值对 键是name的值 ，值为用户填的数据 --> 账号：<input type="text" name="uname" id="" value="" /> <br /> 密码：<input type="password" name="pwd" id="" value="" /> <br /> <!--password 把用户填的隐藏起来 ..代替--> 性别：男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="0" /> <br /> 爱好：吃饭 <input type="checkbox" name="favorite" value="1" checked="checked" /> 睡觉 <input type="checkbox" name="favorite" value="2" /> 旅游<input type="checkbox" name="favorite" value="3" /> <br /> 籍贯： <select name="address"> <!-- <option value="0">--请选择--</option>--> <option value="1">北京市</option> <option value="2">上海市</option> <option value="3" selected="selected">湖北省</option> </select> <br /> 介绍： <br /> <textarea name="intro" rows="10" cols="40"> </textarea> <br /> <input type="hidden" name="hidden" value="哈哈" /> <input type="button" value="普通按钮" /> <input type="submit" value="登录" /> <!--submit是个按钮 一点就开始提交数据--> </form> </body> </html>
二、模拟百度和360
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模拟百度和360</title> </head> <body> <!--注意 百度和360的action (是网址?之前的内容) 及name(百度是wd 360是q)的设置--> <form action="https://www.baidu.com/s" method="get"> <input type="text" name="wd" id="" value=""/> <input type="submit" value="百度一下"/> </form> <form action="https://www.so.com/s" method="get"> <input type="text" name="q" id="" value=""/> <input type="submit" value="360搜索"/> </form> </body> </html>
三、注册页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <h3>新用户注册</h3> <form action="#" method="get"> <table border="1px" cellspacing="0"cellpadding="5px"> <tr height="35px"> <td width="80px">用户名：</td> <td width="200px"> <input type="text" name="uname" value="" /> </td> </tr> <tr height="35px"> <td >密码：</td> <td width="200px"> <input type="password" name="pwd" value="" /> </td> </tr> <tr height="35px"> <td>邮箱：</td> <td> <input type="text" name="mail" value="" /> </td> </tr> <tr height="35px"> <td>手机号：</td> <td> <input type="text" name="phone" value="" /> </td> </tr> <tr height="35px"> <td>性别：</td> <td> 男<input type="radio" name="sex" value="1" checked="checked"/> 女<input type="radio" name="sex" value="0" /> </td> </tr> <tr height="35px"> <td>爱好：</td> <td> 吃饭<input type="checkbox" name="fav" value="1" checked="checked"/> 睡觉<input type="checkbox" name="fav" value="2" /> 玩乐<input type="checkbox" name="fav" value="3" /> </td> </tr> <tr height="35px"> <td>籍贯：</td> <td> <select name="address"> <option value="1">北京市</option> <option value="2" selected="selected">上海市</option> <option value="3">湖北省</option> </select> </td> </tr> <tr height="35px"> <td>自我介绍：</td> <td> <textarea name="intro" rows="5" cols="15"> </textarea> </td> </tr> <tr height="35px"> <td colspan="2" align="center"> <input type="checkbox" name="agree" value="1" /> 是否同意本公司协议 </td> </tr> <tr height="35px"> <td colspan="2" align="center"> <input type="submit" value="注册"/> </td> </tr> </table> </form> </body> </html>
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
