1.基础表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
action是表单提交的地址
target是表单提交的位置
method：是表单提交的方式
post：地址栏状态不会改变，表单数据不会显示
get:地址栏状态会发生变化，表单数据会显示在URL信息中。
-->
<form action="https://www.baidu.com" target="_blank" method="get">
用户名： <input type="text " name="username"> <br>
密 码： <input type="password" name="password"> <br>
<input type="submit" name="提交">
<input type="reset" name="重置"> <br>
</form>
</body>
</html>
2.表单元素
1.文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--文本框
input 标签
type：文本框为text
name： 必须写上,否则提交时取不到值
value：文本框默认值
size:文本框的长度
maxlength：文本框的最长长度
-->
<form action="test.html" method="post">
用户名：<input type="text" name="username" value="用户名" size="40" maxlength="20">
</form>
</body>
</html>
2.文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--文本域
textarea 标签
name： 必须写上,否则提交时取不到值
cols；列数
rows:行数
-->
<form action="test.html" method="post">
<textarea name="textarea" cols="30" rows="10"></textarea>
</form>
</body>
</html>
3.密码框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--密码框
input 标签
type：密码为password
name： 必须写上,否则提交时取不到值
-->
<form action="test.html" method="post">
<input type="password" name="password">
</form>
</body>
</html>
4.单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--单选框
input 标签
type：单选框为radio
value;表单提交的值
name：名字相同，则分组相同，必须分组
checked:默认选择
disabled:禁用
-->
<form action="test.html" method="post">
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex" > 女
</form>
</body>
</html>
5.复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--多选框
input 标签
type：单选框为checkbox
value;表单提交的值
name：名字相同，则分组相同，必须分组
checked:默认选择
disabled:禁用
-->
<form action="test.html" method="post">
<input type="checkbox" value="苹果" name="水果" checked>苹果
<input type="checkbox" value="梨子" name="水果" >梨子
<input type="checkbox" value="香蕉" name="水果" >香蕉
<input type="checkbox" value="橘子" name="水果" >橘子
<input type="checkbox" value="柚子" name="水果" >柚子
</form>
</body>
</html>
6.下拉列表框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--下拉列表框
select-option标签
name：名字相同，则分组相同，必须分组
value:表单提交的值
selected:默认选择
-->
<form action="test.html" method="post">
<select name="科目" >
<option value="语文"> 语文</option>
<option value="数学" selected> 数学</option>
<option value="英语"> 英语</option>
<option value="历史"> 历史</option>
<option value="政治"> 政治</option>
<option value="物理"> 物理</option>
</select>
</form>
</body>
</html>
7.按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<form action="test.html" method="post">
<!--
type:提交按钮为submit value：按钮的名字
-->
<input type="submit" value="submit">
<!--
type:重置按钮为reset value：按钮的名字
-->
<input type="reset" value="reset" >
<!--
type:普通按钮为buttonvalue：按钮的名字
-->
<input type="button" value="button">
<!--
type:图片按钮为image srca：图片的路径
-->
<input type="image" src="">
</form>
</body>
</html>
8.文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<form action="test.html" method="post" enctype="multipart/form-data">
<!--
表单，需要支持提交复杂文件 enctype="multipart/form-data"
-->
<input type="file" name="video">
</form>
</body>
</html>
9.邮件
<form action="test.html" method="post" enctype="multipart/form-data">
<input type="email" name="email">
</form>
10.数字
<form action="test.html" method="post" enctype="multipart/form-data">
<!--
最小：min
最大为;max
步长：step
-->
<input type="number" min="0" max="100" step="10">
</form>
11.网址
<!--url网址-->
<p>
url：<input type="url" name="url">
</p>
12.滑块
<!--滑块
默认值0~100
-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
13.搜索框
<!--搜索框-->
<p>
搜索： <input type="search" name="search">
</p>
表单的应用
1.隐藏域
<!--隐藏域-->
<p>
<input type="hidden" name="count" value="10">
</p>
2.只读和禁用
<p>
用户名： <input type="text" name="username" readonly>
</p>
<p>
密码： <input type="password" name="pwd" disabled>
</p>
3.标注
<p>
<!--通过 for="name" 来链接到 表单中的指定ID -->
<label for="name">用户名： </label>
<input type="text" name="username" id="name">
</p>
4.初级表单验证
为什么要进行表单验证？
1.提示语
<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
用户名：
<input type="url" name="username" placeholder="必须是url格式">
2.必填
<p>
<!--required必须要填写这个字段-->
密码： <input type="password" name="pwd" required>
</p>
3.正则表达式
<p>
<!--pattern:正则表达式-->
手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>
扫一扫
4913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
