2022.4.3 表单

表单

 

 

表单应用

 

表单初级验证

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>表单</title>
  6 </head>
  7 <body>
  8 
  9 <h1>注册</h1>
 10 name 属性规定input元素的名称。
 11 name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript 引用表单数据。
 12 注释：只有设置了name 属性的表单元素才能在提交表单时传递它们的值。
 13 <hr/>
 14 <!--表单
 15 action：表单提交的位置,可以是一个网站也可以是
 16 method：表单提交方式
 17        get：我们可以在url中看到我们提交的信息,不安全
 18        post：安全,能传输大文件
 19 -->
 20 
 21 <form action="1.我的第一个网页.html" method="get">
 22 
 23 <!--
 24 input type="text" 文本输入框   value:默认值      readonly:只读,默认值不能修改
 25 input type="password" 密码输入框                hidden:隐藏
 26 input type="submit" 提交
 27 input type="reset" 重置
 28 input type="radio" value=""单选框  必须写value：表示单选框的值 name起分组作用：在这个分组下只能选一个 checked默认选中
 29                                         disabled:禁用,不能选择
 30 input type="checkbox" value="" 多选框 必须写value：表示多选框的值   checked默认选中
 31 input type="button" name="but1" value="" 按钮  value：按钮名称
 32 input type="image" src="图片地址"  图片按钮：
 33 input type="file" name=""  文件域
 34 
 35 name:输入框名字
 36 value：初始值
 37 maxlength：文本框输入字符数
 38 size：文本框长度
 39 -->
 40 <p>名字：<input type="text" name="username" value="默认值" readonly maxlength="8" size="30"></p>
 41 <p>密码：<input type="password" name="pwd" hidden></p>
 42 
 43 <!--单选-->
 44 <p>性别：
 45     <!--选项写在外边  name起分组作用：在这个分组下只能选一个-->
 46     <input type="radio" value="boy" name="sex" checked disabled/>男
 47     <input type="radio" value="girl" name="sex"/>女
 48 </p>
 49 
 50 <!--多选-->
 51 <p>爱好：
 52     <input type="checkbox" value="sleep" name="hobby">睡觉
 53     <input type="checkbox" value="food" name="hobby">食物
 54     <input type="checkbox" value="race" name="hobby">比赛
 55     <input type="checkbox" value="study" name="hobby" checked>学习
 56 </p>
 57 
 58 <!--按钮-->
 59 <p>
 60     <input type="button" name="but1" value="点击按钮">
 61     <!--图片按钮：与提交功能一样-->
 62     <input type="image" src="../resources/image/3.2.jpg" width="20%" height="20%">
 63 </p>
 64 
 65 <!--下拉框
 66 selected：默认
 67 value：选项的值  后面的清华是  选项的值的名字
 68 -->
 69 <p>下拉框：
 70     <select name="School">
 71         <option value="china">清华</option>
 72         <option value="beida" selected>北大</option>
 73         <option value="fufan">复旦</option>
 74         <option value="tianda">天大</option>
 75     </select>
 76 </p>
 77 
 78 <!--文件域-->
 79 <p>
 80     <input type="file" name="files">
 81 </p>
 82 
 83 <!--文本域
 84 cols：显示列数
 85 rows：行数
 86 -->
 87 <p>反馈：
 88     <textarea name="textatea" cols="50" rows="10">文本内容</textarea>
 89 </p>
 90 
 91 
 92 <!--邮件标签    -->
 93 <p>邮件：
 94     <input type="email" name="email">
 95 </p>
 96 
 97 <!--url验证  网址  -->
 98 <p>网址：
 99     <input type="url" name="url">
100 </p>
101 
102 <!--数字验证
103 step：间隔
104 -->
105 <p>数字：
106     <input type="number" name="numbers" max="100" min="0" step="10">
107 </p>
108 
109 <!--滑块-->
110 <p>滑块：
111     <input type="range" name="voice" max="100" min="0" step="5">
112 </p>
113 <!--搜索框-->
114 <p>
115     <input type="search" name="search">
116 </p>
117 
118 
119     <p>
120     <input type="submit">
121     <input type="reset">
122     <input type="reset" value="清空表单">
123 </p>
124 
125 <!--增强鼠标可用性    -->
126 
127 <p>
128 <!--
129 id:标记
130 for：跳转到id处
131 -->
132     <label for="123">点击文字即可跳转到标记框</label>
133     <input type="text" id="123">
134     <br/>
135 </p>
136     用到输入框中<br/>
137     placeholder:文本框提示信息<br/>
138     required:不能为空<br/>
139     pattern:正则表达式https://www.jb51.net/tools/regexsc.htm<br/>
140     <br/>
141     <input type="text" name="name1" placeholder="请输入信息" required>
142     <br/>
143     邮箱： <input type="email" name="email1" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
144 /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
145 
146 
147 </form>
148 
149 
150 </body>
151 </html>

 

 

 

 

posted @ 2022-04-05 15:19  暴躁C语言  阅读(39)  评论(0)    收藏  举报