表单
<form表示
一些操作：
action：表单提交的位置，可以是一个网站也考研时一个请求处理的地址
method：post，get提交方式
get方式：在url中可以看见提交的信息，不安全但是很方便
post方式：在url中看不见提交的信息，比较安全，可以传输大文件
value：默认的初始值
maxlength：最大能写几个字符
size：文本框的长度
<input输入标签 type：是格式有text，email，password等
加入readonly变成只读，disabled是禁用，不可以选择，一般用于单选框多选框等
hidden是隐藏框，看不见但提交表单仍有信息。
placeholder设置默认提示信息
required设置此选项提交时必须非空，否则设置提示
pattern设置正则表达式来检验
type格式：
-
text：文本框
-
password 密码框
-
radio 单选框
单选框中name表示分组，同一个name值的才能完成单选
value表示选项的值
1 <!-- 单选框标签：radio 2 input type：radio 3 name：表示组 同一个组中才能单选 4 value：选项的值--> 5 <p>性别：<input type="radio" value="boy" name="sex">男 6 <input type="radio" value="girl" name="sex">女 7 </p>
-
checkbox 多选框
name表示分组，value表示选项值
1 <!--多选框：checkbox 2 input type：checkbox 3 --> 4 <p>爱好： 5 <input type="checkbox" value="sleep" name="hobby" >睡觉 6 <input type="checkbox" value="eat" name="hobby" >吃饭 7 <input type="checkbox" value="code" name="hobby" >代码 8 <input type="checkbox" value="game" name="hobby" >游戏 9 <input type="checkbox" value="movie" name="hobby" >电影 10 </p>
-
select 下拉框
1 <!--下拉框列表框--> 2 <p>国家： 3 <select name="列表名称" > 4 <option value="选项的值">中国</option> 5 <option value="选项的值">英国</option> 6 <option value="选项的值" selected>法国</option> 7 <option value="选项的值">美国</option> 8 </select></p>
-
textarea文本域
1 <!-- 文本域 2 textarea name="textarea" 3 --> 4 5 <p>反馈： 6 <textarea name="textarea" cols="10" rows="50">文本内容</textarea> 7 </p>
-
file 文件域
1 <!-- 文件域 2 input type="file" 3 --> 4 <p> 5 <input type="file" name="files"> 6 <input type="button" value="上传" name="upload"> 7 </p>
-
Email 邮件验证
-
pattern 正则表达式
-
url url验证
-
number 数字验证，可以设置max min值
-
range滑块设置，可以设置min max值
-
search 搜索框
其他
-
增强鼠标可用性：点击文本跳转至输入
1 <!--增强鼠标可用性--> 2 <label for="mark">点击</label> 3 <input type="test" id="mark">
-
创建
1 <!--创建按钮 2 input type="button" 创建自定义按钮 3 input type="image"创建图片跳转按钮 4 input type="submit"提交按钮 5 <input type="reset"清空表单按钮 6 --> 7 <p>按钮： 8 <input type="button" name="btn1" value="点击变长"> 9 <!-- <input type="image" src="../Resouces/imag/图片1.jpg">--> 10 </p> 11 <p><input type="submit" > 12 <input type="reset"> 13 </p>
总体代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>学习表单</title> 6 </head> 7 <body> 8 <h1>注册</h1> 9 <!-- 表单form 10 action :表单提交的位置，可以是网站也可以是一个请求处理地址 11 method :post，get提交方式 12 get: 在url中可以看到提交的信息，不安全但是方便 13 post：在url中看不到信息，比较安全，可以传输大文件 14 value：默认初始值 15 maxlength：最大写几个字符 16 size：文本框的长度 17 18 --> 19 <form action="1.第一个网页.html" method="get"> 20 <!-- 文本输入框：input标签 type = text--> 21 <!-- 添加值后，加入readonly变成只读 22 disabled：禁用不可选择 23 hidden：隐藏框 24 --> 25 <!-- placeholder： 默认提示信息。 26 required：非空提示 27 pattern :正则表达式 28 --> 29 <p>名字：<input type="text" name="usernanme" placeholder="请输入用户名"></p> 30 <!-- 密码框：input标签 type：password --> 31 <p>密码：<input type="password" name="pwd" required></p> 32 33 <!-- 单选框标签：radio 34 input type：radio 35 name：表示组 同一个组中才能单选 36 value：选项的值--> 37 <p>性别：<input type="radio" value="boy" name="sex">男 38 <input type="radio" value="girl" name="sex">女 39 </p> 40 <!--多选框：checkbox 41 input type：checkbox 42 --> 43 <p>爱好： 44 <input type="checkbox" value="sleep" name="hobby" >睡觉 45 <input type="checkbox" value="eat" name="hobby" >吃饭 46 <input type="checkbox" value="code" name="hobby" >代码 47 <input type="checkbox" value="game" name="hobby" >游戏 48 <input type="checkbox" value="movie" name="hobby" >电影 49 </p> 50 51 52 53 <!--下拉框列表框--> 54 <p>国家： 55 <select name="列表名称" > 56 <option value="选项的值">中国</option> 57 <option value="选项的值">英国</option> 58 <option value="选项的值" selected>法国</option> 59 <option value="选项的值">美国</option> 60 </select></p> 61 62 <!-- 文本域 63 textarea name="textarea" 64 --> 65 66 <p>反馈： 67 <textarea name="textarea" cols="10" rows="50">文本内容</textarea> 68 </p> 69 70 <!-- 文件域 71 input type="file" 72 --> 73 <p> 74 <input type="file" name="files"> 75 <input type="button" value="上传" name="upload"> 76 </p> 77 78 <!-- 邮件验证 79 input type="email" 80 --> 81 <p>邮箱 82 <input type="email" name="email"> 83 </p> 84 <!-- pattern :正则表达式--> 85 <p>自定义邮箱： 86 <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> 87 </p> 88 <!-- url--> 89 <p>url 90 <input type="url" name="url"> 91 </p> 92 <!-- 数字验证 93 input type="number" 94 --> 95 <p>数字： 96 <input type="number" name="num" max="100" min="0" step="10"> 97 </p> 98 99 <!-- 滑块--> 100 <p>滑块： 101 <input type="range" name="voice" min="0" max="100" step="2" > 102 </p> 103 104 <!-- 搜索框--> 105 <p>搜索： 106 <input type="search" name="search"> 107 </p> 108 <!--增强鼠标可用性--> 109 <label for="mark">点击</label> 110 <input type="test" id="mark"> 111 112 113 114 115 <!--创建按钮 116 input type="button" 创建自定义按钮 117 input type="image"创建图片跳转按钮 118 input type="submit"提交按钮 119 <input type="reset"清空表单按钮 120 --> 121 <p>按钮： 122 <input type="button" name="btn1" value="点击变长"> 123 <!-- <input type="image" src="../Resouces/imag/图片1.jpg">--> 124 </p> 125 <p><input type="submit" > 126 <input type="reset"> 127 </p> 128 </form> 129 </body> 130 </html>
标签：提交,单选框,day25,表单,url,html,设置,name From： https://www.cnblogs.com/GUGUZIZI/p/16890759.html