html学习笔记---表单基础一-优快云博客

本文详细介绍了HTML表单的各种元素及其用法，包括文本输入框、密码框、单选按钮、复选框等，并对比了GET与POST提交方式的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单功能是用于搜集页面用户信息并发送给服务器，实现用户和服务器的交互。

form是块级元素

表单包含表单域表单标签表单按钮

<form action="url" name="" enctype="multipart/form-data" method="get(post)">/*url：form表单提交的地址 enctype：表单提交数据的编码（multipart/form-data：二进制) method:表单提交的方式*/
用户名：<input type="text" name="username"/>
			密码：<input type="password" name="password"/>
			<input type="submit" value="提交"/>
		</form>

《input》
input是自闭合标签，根据type类型而改变

type类型包括

•单行文本框<input type="text">默认值是type="text"

•密码框<input type="password"/>　

•单选按钮<input type="radio"/>

	男性：<input type="radio" checked="checked" name="Sex" value="male" /> <br />//check表示默认选中
	女性：<input type="radio" name="Sex" value="female" />

•复选框<input type="checkbox"/>

兴趣爱好：
吃<input type="checkbox" name="intreset"  value="eat"/>
玩<input type="checkbox" name="intreset"  value="play"/>
喝<input type="checkbox" name="intreset"  value="drink"/>
乐<input type="checkbox" name="intreset"  value="happy"/>

•隐藏域<input type="hidden"/>

•文件上传<input type="file"/>

<form action="" method="post"  enctype="multipart/form-data">//post:加密，不限制大小0
        <input type="file" name="fileField" />
        <input type="submit"  value="上传" />
 </form>

•下拉框<select>

<select><optionvalue="1">上海</option><optionvalue="2">北京</option><optionvalue="3">广州</option></select>

•多行文本<textarea></textarea>

•标签<label></label>

•文件组<fieldset></fieldset>

•提交按钮<input type="submit"/>

•普通按钮<input type="button"/>

•重置按钮<input type="reset"/>

《label》

label：给input元素定义标注

<label for=""></label>label的 for属性和input中的id属性值相同

<input type="radio" id="boy" name="sex"/>
			<label for="boy">男</label>
			<input type="radio" id="girl" name="sex"/>
			<label for="girl">女</label>

注意：

post方式与get方式的区别：
一、安全性
get方式不够安全，以url方式进行提交
post以请求实体提交，不会显示地址栏，足够安全
二、提交大小限制
get方式提交的内容大小有限，一个地址栏放不了多少东西，1k左右
post大小无限制，可以放大文件（音频、视频、图像。。。）