HTML5表单
程序员文章站
2022-05-11 10:51:23
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--表单在网页中多用于输入用户名和密码，以及填写个人信息，收集用户信息，与后台交互-->
<!--表单是不能设置居中显示的，input的align属性也只能和type="image"配合使用，表示图片与其他元素的相对位置，要设置表单居中，可以在表单外面加一层<div align="center"></div>-->
<!--表单域
<form> 双标签，用于搜集用户输入内容的表单
action，提交代码服务器地址，可以是网页，也可以是网址，不写就是他自己
method,method规定表单的一 种HTTP(超文本传输协议)提交方式一共8种
最常用get/post
一般用put/delete
get/post区别
1、get缺省默认
特点
明文提交提交的内容会显示在ur1地址栏上不安全
数据的提交方式提交地址与数据之间用? 拼接数据和数据之间用&拼接
数据格式:表单元素name属 性=value属性的值
提交的数据大小限制最大2KB
向服务器获取数据时使用get
提交的数据会在网页的地址框显示
2、post
特点
隐式提交提交的内容在请求体中相对安全
提交的数据没有大小限制
向服务器传递数据时使用post
提交的数据不会在网页的地址框显示，通过F12->网络->post->请求 可以看到
enctype(encoding type) 编码方式
application/x . www- form - urlencoding字符串方式默认
multipart/form-data流的方式， 若表单中有file域，即图片、文库、音视频必须采用
文件上传
-->
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<!--插入标签
格式<input type=""> 单标签，type表示插入标签的类型
type="text",插入但行文本信息
type="radio",单选框，要实现在多个选项中只能选择一个，需要给多个单选框设置相同的name。
type="submit",提交按钮
-->
姓名：
<input type="text" name="姓名" />
<br />
性别：
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<br />
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="重置" />
<!--下拉标签
<select> 下拉标签，双标签
<option> 下拉标签的项，双标签
size,<selec>的属性，表示同时展示多少个标签
selected <option>的属性，表示默认这个选项是选中的状态
-->
<br />
<select >
<option value ="android">android</option>
<option value="web">web</option>
<option value="java" selected>java</option>
</select>
<!--输入多行信息
<textarea>,双标签，文本区域
属性：rows，舒入可见行长数
cols，输入可见列数
-->
<br />
自我介绍：
<textarea name="message" cols="10" rols="30">
To introduce myself
</textarea>
</form>
</body>
</html>