html重要的form标签_formpassedvalue-CSDN博客

本文链接：https://blog.csdn.net/passed_by12/article/details/100168889

一、表单的功能

form标签在网页中起到数据收集的功能，连接web客户端与服务端的一个标签。

二、属性

action：表单提交的位置
method：表单的提交方式，有GET与POST两个参数，默认GET方式提交

GET与POST

1、GET提交方式会将参数拼接到URL中，再将数据提交到服务器；而POST不会拼接URL，会把参数放到请求体中。
2、根据1中的特点可知，POST提交方式比GET更安全，GET提交方式比POST获取数据快。
3、GET请求方式一般用于获取数据；而POST请求方式一般用于提交数据。

三、form标签成员

1、input（表单的重要组成部分）

input的属性：

	说明
type	定义input标签的类型
name	自定义名称，在需要提交数据的时候，该参数是必选参数。
value	input标签中的显示的内容
size	设置input标签的尺寸
placeholder	设置input标签的占位符
readonly	设置input为只读，显示的数据不能修改
maxlength	设置input中最大的字符长度
disabled	设置为禁用状态

其中type决定input标签的类型，包括有：普通文本框、密码输入框、单选框、复选框、提交按钮、数值型的文本框等。
（一）普通文本框、密码框

<form action="my.html" method="post">
    用户：<input type="text" name="username"/><br>   <!--普通文本框-->
    密码：<input type="password" name="password"/>    <!--密码框-->
</form>

效果：
在这里插入图片描述
普通文本框中的内容正常显示，而密码框中的内容默认使用 ●（实心圆点）替换所有输入的文本内容。
（二）单选框、复选框

<form action="my.html" method="post">
<!--单选框-->
    性别：<input type="radio" name="sex" value="0" checked="ch"/>男   
    <input type="radio" name="sex" value="1"/>女<br>
<!--复选框-->
    爱好：<input type="checkbox" name="like" value="read"/>读书   
    <input type="checkbox" name="like" value="games"/>游戏
    <input type="checkbox" name="like" value="sport"/>运动
</form>

效果：
在这里插入图片描述
checked属性作用是设置默认值，即默认选择此选项。若需要在点击文本时，实现选择按钮的功能，需要分别添加id属性与for属性，并且id与for属性值要相同。

<input type="radio" id="sex" name="sex" value="0" checked="ch"/>
<label for="sex">男</label>

（三）提交按钮、重置按钮、数值文本框

<form action="my.html" method="post">
<!--数值型文本框-->
	<input type="number" name="number" /><br>
<!--重置按钮-->
	<input type="reset" name="reset">
<!--普通提交按钮-->
	<input type="submit" name="submit" />
<!--图片提交按钮-->
	<input type="image" src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=952337662,615710730&fm=85" name="submit" />
</form>

效果：
在这里插入图片描述
数值型文本框的值只能是数值，而且可以点击上下箭头对文本框的值加减，数值可以为负。
（四）上传文件

<form action="a.html" method="post" enctype="multipart/form-data">
<!--上传文件按钮-->
	<input type="file" name="file" /><br>
<!--普通提交按钮-->
	<input type="submit" name="submit" />
</form>

效果：
在这里插入图片描述
提交的表单中有使用到此标签的时候，form的提交方式只能是POST，而且还要添加enctype="multipart/form-data"属性值。
（五）隐藏文本

<form action="my.html" method="post">
    <input type="hidden" value="我是隐藏内容" />
</form>

此类型的input标签用于提交一些隐藏的内容，在页面不显示，不占位置，表单提交后可以在页面的请求体中看到。

2、下拉选择框

<form action="a.html">
	<select name="select">
		<option value="bj" selected="selected">北京</option>
		<option value="sh">上海</option>
		<option value="gz">广州</option>
		<option value="sz">深圳</option>
	</select>
	<input type="submit" name="submit" />
</form>

效果：
在这里插入图片描述
使用下拉选择框时，select一定要添加name属性，并且option添加value属性；selected属性是默认选定此option。

文本域（textarea）、富文本编辑器

<form action="a.html" method="post">
	<textarea rows="5" cols="10">
	</textarea>
	<input type="submit" name="submit" />
</form>

效果：
在这里插入图片描述
在页面中也可以使用富文本编辑器替换文本域标签。
示例：（使用富文本编辑器需要下载到项目中）

<!--引入js-->
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

<!-- 实例化编辑器-->
<script type="text/javascript">
    var ue = UE.getEditor('editor', {});
</script>
<body>
<!-- 引用富文本编辑器 -->
    <p id="editor" style="width:800px;height: 200px;"></p> 
</body>