作者：老翅几回寒_332 | 来源：互联网 | 2023-08-11 13:54
1.初始表单post和get提交
表单元素格式
属性 |
说明 |
|---|
type |
指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认text |
name |
指定表单元素的名称 |
value |
元素的初始值。type为radio时必须指定一个值 |
size |
指定表单元素的初始宽度。但type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。 |
maxlength |
type为text或password时，输入的最大字符数 |
checked |
type为radio或checkbox时，指定按钮是否被选中 |
2.表单的内容
按钮、多选框、文本框、单选框、列表框文本域、文件域、搜索框滑块、简单验证
3.表单的应用
表单的应用
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled
4.表单初级验证
表单初级验证
- 常用方式
- placeholder：提示信息
- required：非空判断
- pattern：正则表达式
DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>表单title>
head>
<body>
<h1>注册h1>
<form action=""1.初始网页.html"" method=""get"">
<p> 名字: <input type=""text"" name=""username"" placeholder=""请输入用户名"" required> p>
<p> 密码: <input type=""password"" name=""password"" placeholder=""请输入密码"">p>
<p>性别:
<input type=""radio"" value=""boy"" name=""sex""/>男
<input type=""radio"" value=""girl"" name=""sex"">女
p>
<p>爱好:
<input type=""checkbox"" value=""sleep"" name=""hobby"">睡觉
<input type=""checkbox"" value=""code"" name=""hobby"">敲代码
<input type=""checkbox"" value=""chat"" name=""hobby"">聊天
<input type=""checkbox"" value=""game"" name=""hobby"">游戏
p>
<p>按钮:
<input type=""button"" name=""btn1"" value=""点击"">
p>
<p>下拉框:
<select name=""列表名称"">
<option value=""china"">中国option>
<option value=""us"">美国option>
<option value=""se"">瑞士option>
<option value=""uk"">英国option>
select>
p>
<p>反馈:
<textarea name=""textarea"" cols=""30"" rows=""10"">文本内容textarea>
p>
<p>上传文件:
<input type=""file"" name=""files"">
p>
<p>邮件验证:
<input type=""email""name=""email"">
p>
<p>URL:
<input type=""url"" name=""URL"">
p>
<p>数字:
<input type=""number"" name=""number"" max=""100"" min=""0"" step=""1"">
p>
<p>滑块:
<input type=""range"" name=""voice"" min=""0"" max=""100"" step=""1"">
p>
<p>
<input type=""search"" name=""search"">
p>
<p>
<label for=""mark"">你点我试试label>
<input type=""text"" id=""mark"">
p>
<p>
<input type=""submit"">
<input type=""reset"" value=""清空表单"">
p>
form>
body>
html>
![前端库Bootstrap框架：「11]使用 span 创建行内元素](https://img6.php1.cn/3cdc5/9921/243/17a6062cb49e163c.png)
京公网安备 11010802041100号