[19/05/18-星期六] HTML_form标签
一、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>
[19/05/18-星期六] HTML_form标签的更多相关文章
- [19/05/16-星期四] HTML_body标签(表格标签)
一.概念 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签
一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...
- [19/05/15-星期三] HTML_body标签(超链接标签和锚点)
一.超链接标签 <html> <head> <meta charset="UTF-8"> <title>04 body超链接标签学习 ...
- [19/05/14-星期二] HTML_body标签(列表标签和图片标签)
一.列表标签 <!-- 快捷键 1.<meta charset="UTF-8"/> 用m6可直接写出 2.复制当前1行到下一行 ctrl+shift+R --&g ...
- [19/05/13-星期一] HTML_head标签 和 body标签_文本标签
一.概念 概念:超文本标记语言 作用:需要将Java在后台根据用户的请求处理结果在浏览器显示给用户.数据已经过来了,但是显示可能比较凌乱,所以html应用而生,就像写作文要加标点看着舒服. 在浏览器中 ...
- Kubernetes部署通用手册 (支持版本1.19,1.18,1.17,1.16)
Kubernetes平台环境规划 操作环境 rbac 划分(HA高可用双master部署实例) 本文穿插了ha 高可用部署的实例,当前章节设计的是ha部署双master 部署 内网ip 角色 安装软件 ...
- [19/05/27-星期一] JavaScript_ 条件语句(if语句)和循环语句(while 、for、do-while)
一.条件语句 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- Java 18 新增@snipppet标签，注释中写样例代码更舒适了！
在这次的Java 18中,新增了一个@snipppet标签,主要用于JavaDoc中需要放示例代码的场景.其实在Java 18之前,已经有一个@code标签,可以用于在JavaDoc中编写小段的代码内 ...
- Spring Security（18）——Jsp标签
目录 1.1 authorize 1.2 authentication 1.3 accesscontrollist Spring Security也有对Jsp标签的支持的标签库 ...
随机推荐
- pam模块
main 循环监控 独立的程序 根据配置防护 登陆 ca cert 私有口令 openssl 证书口令??
- 刷PTA这一周的感悟
在慕课上报名了浙江大学的<数据结构>这门课,主讲人陈越老师,何钦铭老师,两位老师讲的很好,课后有配套的PTA可以用来做题,练习. 最近在PTA上刷题,发现自己代码实现能力是真的差劲,一开始 ...
- 洛谷 P4902 乘积 （约数筛，前缀和（积））
洛谷P4902乘积 题意简述: 给 $ t $ 组 $ (a,b) $ 求: $ \prod_{i=A}^{B}\prod_{j=1}^{i}(\frac{i}{j})^{\lfloor \frac{ ...
- sharepoint 2010 创建自定义的ASP.NET Web Service （上）
项目背景 根据客户需求在SharePoint 2010 中创建自定义的ASP.NET Web Service可以分为3种方式(我所知道的).废话少说,下面一一列举: 创建方式 MSDN 官方博客自己的 ...
- day5 函数
1.求全部元素的和 [1,2,1,2,3,3,3,3] 遍历 a = [1,2,1,2,3,3,3,3] sum = 0 n = len(a)-1 while n>=0: sum += a[ ...
- 什么是npm ? 什么是node ? 什么是vue-cli ？什么是webpack ?
- SQL server 统计分组经计
SUM(A.AREA) OVER ( PARTITION BY A.ItemNo, A.PARTS ,A.WIDTH,A.HEIGHT) allotQty, SUM(A.SL) OVER ( PART ...
- 【PowerOJ1746&网络流24题】航空路线问题（费用流）
题意: 思路: [问题分析] 求最长两条不相交路径,用最大费用最大流解决. [建模方法] 把第i个城市拆分成两个顶点<i.a>,<i.b>. 1.对于每个城市i,连接(< ...
- AT2371 Placing Squares
题解 考虑\(dp\) \[ dp[i]=\sum_{i=0}^{i-1}dp[j]*(i-j)^2 \] 我们可以设\((i-j)\)为\(x\),那么随着\(i\)向右移动一格,每个\(x\)都是 ...
- DB数据库的基本操作
启动 MongoDB 服务 sudo service mongodb start 进入 MongoDB 命令行操作界面,在命令行中敲 exit 可以退出.mongo 创建数据库 use db 命令查看 ...