HTML中form表单全面认识

 

1.前后端存在数据交互时，前端使用form表单

2.form表单提交数据的【注意事项】
　　1. 所有获取用户输入的标签都必须放在form表单里面
　　2. action控制着往哪儿提交 <form action=""></form>
　　3. input\select\textarea 都需要有name属性和value属性，这些对应着后端对数据的存储 {key="标签属性name的值"：value="标签属性value的值"}
　　4. 表单数据提交使用 submit提交按钮 <input type="submit">，千万不要写成普通的button按钮<input type="button">

　　5.当用form表单提交数据时，注意必须配置两个属性 methond="post"  enctype="multipart/form-data" 或 "application/x-www-form-urlencoded"

 

3.认识类型不同的input标签 <input id="xx" name="xx" type="xxx" value="xx">

　　text单行文本框
　　password 密码框
　　radio 单选框
　　checkbox 多选（复选）框
　　date 日期框
　　datetime 时间框
　　file 文件框
　　button 普通按钮,多用JS给它绑定事件
　　reset 重置按钮
　　submit 提交按钮

4.借助HTML代码全面认识form标签

  1 <!DOCTYPE html>
  2 <html lang="ch-zn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>注册</title>
  6 </head>
  7 <body>
  8 <!--form表单常见属性的说明-->
  9 <!--action 表单提交的地址URL-->
 10 <!--enctype 提交数据的编码 默认使用application/x-www-form-urlencoded 当表单中有文件时 需要分段传送 multipart/form-data-->
 11 <!--autocomplete 自动补全 默认是on开启的 其效果是文本框输入时 历史输入记录存在 有助于再次迅速填写表单-->
 12 <!--novalidate 浏览器不验证表单 举例 邮箱格式验证-->
 13 <!--target action属性中地址的目标 默认为-self -->
 14 
 15 <form action="" method="post" enctype="multipart/form-data" autocomplete="on" >
 16     <p>
 17         <label for="n1">示范1 属性placeholder 占位符效果 </label>
 18         <!--注意placeholder 不是value值-->
 19         <input id="n1" name="ame" type="text"  placeholder="金龙鱼大米">京东搜索
 20     </p>
 21     <p>
 22         <label for="n2">示范2 只读属性readonly 默认值属性value </label>
 23         <input id="n2" name="name" type="text"  value="小强" readonly>
 24     </p>
 25     <p>
 26         <label for="n3">示范3 属性禁用disabled</label>
 27         <input id="n3" name="ame" type="text"  value="杨杨" disabled>
 28     </p>
 29 
 30     <!--文本框历史输入记录不显示 可以关闭form表单的属性autocomplete 其值默认为on-->
 31     <p>单行输入框  nput-text 名称：<input id="n4" name="userName" type="text"></p>
 32 
 33     <p>密码输入框 input-password 密码：<input name="userPassword" type="password"></p>
 34 
 35     <!--对邮箱输入格式不进行教育  则对form表单添加 novalidate 属性-->
 36     <p>邮箱 input-email：<input name="" type="email">
 37 
 38     <p>生日 input-date:<input name="birthday" type="date"></p>
 39     <p>月份 input-month：<input name="month" type="month"></p>
 40     <p>时间 input-time:<input name="time" type="time"></p>
 41 
 42     <!--什么时候使用 input文本输入框使用type="hidden"属性呢？-->
 43     <!--数据表的索引值 不希望被用户修改 又是用户依据索引值 操作对应数据的基础  举例：学生ID 学生姓名 学生年龄 学生成绩 这个ID就需要在表单上隐藏起来-->
 44     <p>隐藏文本 input-hidden:<input name="hidden" type="hidden"></p>
 45 
 46     <p>文件选择框 input-file：<input name="tx" type="file"></p>
 47 
 48     <p>单选框 input-radio 性别 写法不规范 只点击文本'男''女' 是无法选中圆圈按钮的：
 49         <input name="gender" type="radio" value="1">男
 50         <input name="gender" type="radio" value="0">女
 51         <input checked name="gender" type="radio" value="2">保密
 52     </p>
 53 
 54     <p>单选框 input-radio 性格 借助label-for="id"标签与input标签的捆绑 ：
 55         <!--规范了input标签的文本说明 点击文本'活泼''沉默' 就可以实现圆圈按钮的选择-->
 56         <label for="x1">活泼</label>
 57             <input id="x1" name="xingge" type="radio"  value="A">
 58 
 59         <label for="x2">沉默</label>
 60             <input id="x2" name="xingge" type="radio"  value="B">
 61 
 62         <label for="x3">呆板</label>
 63             <input id="x3" name="xingge" type="radio" value="C">
 64     </p>
 65 
 66     <p>复选框 input-checkbox 属性checked 默认被勾选：
 67         <input name="hobby" type="checkbox" value="football">足球
 68         <input name="hobby" type="checkbox" value="basketball">蓝球
 69         <input checked name="hobby" type="checkbox" value="doublecolorball">双色球
 70     </p>
 71 
 72 
 73     <!--多行文本 textarea 的属性 行数rows 列数cols-->
 74     <p>多行文本 textarea：<textarea name="info" id="id_info" cols="80" rows="3"></textarea></p>
 75 
 76 
 77     <p>下拉选择 季节 select&gt;option 属性selected 默认被选中：
 78         <select name="se" id="c1">
 79             <option value="1">春季</option>
 80             <option selected value="2">夏季</option>
 81             <option value="3">秋季</option>
 82             <option value="4">冬季</option>
 83         </select>
 84     </p>
 85 
 86     <p>multiple属性 多选下拉选择 课程 select&gt;option：
 87         <select name="class" id="c2" multiple>
 88             <option selected value="java">JAVA</option>
 89             <option selected value="python">PYTHON</option>
 90             <option value="c">C语言</option>
 91             <option value="javascript">JavaScript</option>
 92         </select>
 93     </p>
 94 
 95     <p>二级下拉选择框 省份 select&gt;optgroup-label&gt;option:
 96         <select name="from" id="">
 97             <optgroup label="东北">
 98                 <option value="liao">辽宁</option>
 99                 <option value="ji">吉林</option>
100                 <option value="hei">黑龙江</option>
101             </optgroup>
102             <optgroup label="华东">
103                 <option value="liao">南京</option>
104                 <option value="ji">无锡</option>
105                 <option value="hei">苏州</option>
106             </optgroup>
107         </select>
108     </p>
109 
110 
111     <p>提交按钮 input-submit:<input type="submit" value="我要提交"></p>
112     <p>提交按钮 input-submit:<input type="submit" value="完成">请点击完成进行提交</p>
113 
114     <p>普通按钮 input-button 不发生提交 常用于javascript事件的绑定 :<input type="button" value="button"></p>
115 
116     <p>重置按钮 input-reset 应用于清空恢复原状态 :<input type="reset" value="reset"></p>
117 
118 
119 </form>
120 
121 </body>
122 </html>

 

posted @ 2020-04-09 18:44  CherryYang  阅读(536)  评论(0)    收藏  举报