Form表单

最新推荐文章于 2024-04-24 20:12:52 发布

@牛二

最新推荐文章于 2024-04-24 20:12:52 发布

阅读量1.7k

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/qq_50931436/article/details/117258931

版权

form表单

一.HTML 表单用于收集用户输入。

<form action="" method="">
    内容
</form>

1、action:表单提交的地址

2、methon:表单提交的方式，有get(默认)、post两种

get(默认):提交的数据在提交后的页面地址栏是可见的，一般用于提交少量数据(浏览器会设定容量限制)，安全性差。
post:提交的数据在提交后的页面地址栏是不可见的，一般用于提交大量数据，安全性好。

当提交的数据是被动的时侯(比如搜索引擎等)，推荐使用get

当提交的数据是敏感信息的时候(比如密码等)，推荐使用post

二、input元素

text(文本框):文本输入
password(密码框):密码输入
submit:提交按钮
radio:单选按钮
checkbox:多选按钮
button:普通按钮
reset:复位按钮
image:图片按钮
file:选择文件按钮
hidden:隐藏域

文本输入

<input type="text" name="">

获取输入的值

密码输入

<input type="password" name="">

获取输入的密码

提交按钮

<input type="submit" value="注册">

用于提交form表单内容的按钮，value的值是显示在页面的提交按钮上

单选按钮

<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女

多个选项只能选择其中的一项。可以通过checked来设置默认值

多选按钮

<input type="checkbox" name="足球" value="足球">足球
<input type="checkbox" name="篮球" value="篮球">篮球
<input type="checkbox" name="LOL" value="LOL">LOL
<input type="checkbox" name="韩剧" value="韩剧">韩剧
<input type="checkbox" name="王者荣耀" value="王者荣耀">王者荣耀

多个选项可以选择多项，可以通过checked来设置默认值

普通按钮

<input type="button" value="普通按钮">

复位按钮

<input type="reset" value="复位按钮">

将页面上面的内容进行重置

图片按钮

<input type="image" src="1.jpg">

选择文件

<input type="file" value="选择文件">

用于选择文件

隐藏域

<input type="hidden">

通常用于传递值

三、select和option

用来实现下拉列表

<select>
<option>内容1</option>
<option>内容2</option>
<option>内容3</option>
</select>

在option中用selected属性来实现默认选中的状态

<select>
<option>内容1</option>
<option>内容2</option>
<option selected>内容3</option>
</select>

四、textarea

提供可输入大量文本的文本框，可设置大小

<areatext>


</areatext>

textarea中通过cols属性对列宽来进行设置

textarea中通过rows属性对行高来进行设置

<textarea cols="10" rows="10">
			
</textarea>

下面我们通过一个例子来对form表单进行深入的了解

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xxx书城账户注册</title>
</head>
<body align="center" bgcolor="#e3dede">
	<h1>xxx书城账户注册</h1>
	<form action="">
	<!-- 文本框 -->
		<P>用户名：<input type="text" name="username" required="required" autofocus="autofocus" 
		placeholder="请你输入用户名"></P>
	<!-- 密码框 -->
		<p>密&nbsp;&nbsp;码 ：<input type="password" name="password1" required="required" autofocus="autofocus"
		placeholder="请输入您的密码"></p>
	<!--当选按钮  -->
		<p>请选择您的性别
		<input type="radio" name="gender" value="男" checked>男
		<input type="radio" name="gender" value="女">女</p>
	<!--多选按钮  -->
		<p>请选择您的爱好<input type="checkbox" name="足球" value="足球">足球
		<input type="checkbox" name="篮球" value="篮球">篮球
		<input type="checkbox" name="LOL" value="LOL">LOL
		<input type="checkbox" name="韩剧" value="韩剧">韩剧
		<input type="checkbox" name="王者荣耀" value="王者荣耀">王者荣耀</p>

		<p>请输入你的邮箱<input type="email" placeholder="邮箱"></p>

		<!-- 文件域 -->
		<p>选择您的头像<input type="file"></p>

		<!-- select和option 下拉列表 -->
		<p>家庭住址
		<select>
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3" selected="selected">重庆</option>
		</select>
		</p>
		<p>收获地址
			<select multiple="multiple">
				<option value="4">江北</option>
				<option value="5">渝北</option>
				<option value="6">永川</option>
				<option value="7">合川</option>
			</select>
		</p>

		<!-- 文本域 -->
		<p><textarea name="jy" id="jy" cols="30" rows="10" placeholder="请您输入对我们的建议"></textarea></p>
		<!-- 提交按钮 -->
		<p><input type="submit" value="注册">
			<input type="reset" value="重置">
		</p>
	</form>
</body>
</html>

效果如下：

通过这个例子，我们对form表单里的内容有了进一步的了解，今天就到这里吧，掰掰

@牛二

关注

6
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
Form表单

form表单一.HTML 表单用于收集用户输入。<form action="" method=""> 内容</form>1、action:表单提交的地址2、methon:表单提交的方式，有get(默认)、post两种get(默认):提交的数据在提交后的页面地址栏是可见的，一般用于提交少量数据(浏览器会设定容量限制)，安全性差。 post:提交的数据在提交后的页面地址栏是不可见的，一般用于提交大量数据，安全性好。当提交的数据是被动的时侯(比...
复制链接

扫一扫