[19/05/18-星期六] HTML_form标签
2024-09-05 20:53:06
一、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>
最新文章
- 在IIS8.5的环境下配置WCF的Restful Service
- 客户端判断是否为IE9以上版本
- 基本数据类型范围大小&&字节大小
- Ext JS 6 新特性和工具
- 搭建DNS服务器
- ASE中的主要数据库
- JavaWEB HTTP请求中POST与GET的区别
- Eclipse——热键&amp;Help
- How To Add Swap on Ubuntu 14.04
- 在linux系统中跟踪高IO等待
- Uva 11300 Spreading the Wealth(递推，中位数)
- bigdata learning unit one--Hadoop environment setting
- 记录结果再利用的"动态规划"
- 【IT笔试面试题整理】判断链表是否存在环路，并找出回路起点
- JAVA WEB 三器之过滤器（Filter）
- $.AJAX参数提交及后台获取方式
- win7 精简板 安装ardunio uno r3驱动
- C语言中内存管理规范
- U45490 还没想好名字的题Ⅱ
- (1.1.6)UVA 10978 Let's Play Magic!(直叙式模拟)