表单标签

最新推荐文章于 2023-07-13 19:55:35 发布

多一些不为什么的坚持啊

最新推荐文章于 2023-07-13 19:55:35 发布

阅读量368

点赞数

本文链接：https://blog.csdn.net/weixin_43850619/article/details/101223070

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

form表单标签:
作用：收集并提交用户数据给指定服务器
属性：action：收集的数据提交地址也就是URL
   method：收集的数据的提交方式
   get：适合小量数据，表单数据以？隔开拼接在URL后面，不同的键值对使用&符号隔开，不安全
   post：适合大量数据，安全，隐式提交
注意：1. 表单数据的提交，要提交的表单项必须拥有name属性值，否则不会提交
   提交表单项数据为键值对，键为name属性的值，值为用户书写的数据
   2. form标签会收集其标签内部的数据
   3. form表单的数据提交需要依赖于submit提交按钮

form表单域标签：
作用：给用户提供可以进行数据书写或者选择的标签
使用：文本框：input：
type：
   text：收集少量的文本数据，用户课件
   password：收集用户密码数据
   name：数据提交的键，也会被js使用
   value：默认值

单选框：input：
type：
   radio:
   name：name属性值相同的单选框只能选择一项数据
   value：要提交的数据
   checked：checked使用此属性的单选默认是选择状态

多选框：input：
   type：checkbox
   name：一个多选组需要使用相同的name属性值
   value：要提交的数据
   checked：checked 使用此属性的多选框默认是选择状态

  单选下拉框：select：
   name：数据提交的键名，必须声明
   子标签option：一个option标签显示一个下拉选项
   value：需提交的数据文

文本域：textrea：声明一个可以书写大量文字的文本区域
name：数据提交是键名，js和css也会使用
rows：声明文本域的行数
cols：声明文本域的列数

普通按钮：input：
type：button
value

隐藏标签：input：
   type：hidden
   name
   value
注意：表单数据提交提交的是表单域标签的value值

form表单标签的使用：
在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式，提交给action属性所指明的提交地址。

示例：

<html>
	<head>
		<meta charset="utf-8"/>
		<title>表单标签</title>
		
	</head>
	<body>
		<h3 align="center">表单标签</h3>
		<hr />
        <form action="#"  method="get">
        	用户名：<input type="text" name="uname"/><br />
        	密码：<input type="password" name="upwd"/><br />
          	性别：男<input type="radio" name="sex" value="1"  checked="checked"/>   
          	女<input type="radio" name="sex"  value="0"  checked="checked"/><br />
          	爱好：<br />
          	            唱歌<input type="checkbox" name="fav"  value="1" /><br />
          	            跳舞<input type="checkbox" name="fav"  value="2"/><br />
          	            玩游戏<input type="checkbox" name="fav"  value="3"/><br />
          	籍贯：<br />
          	<select name="address" id="">
          		<option value="">---请选择---</option>
          		<option value="1">北京</option>
          		<option value="2">上海</option>
          		<option value="3"  selected="selected">南京</option>
          	</select>
          	<br />
          	文本域：<br />
          	<textarea name="intro" rows="" cols=""></textarea><br />
          	普通按钮：<br />
          	<input type="button" name="" id="" value="普通按钮"/><br />
          	隐藏标签：<br />
          	<input type="hidden"  name="hidden"  id=""  value="哈哈" /><br />
        	<input type="submit" value="登录"/>
        </form>
	</body>
</html>