image.png

表单元素

表单 form

双标签，把所有元素放入标签内

属性：
见下面表单提交。

输入框 input

单标签

  1. <!-- 文本输入 -->
  2. <input type="text" value="默认值" />
  4. <!-- 密码输入 -->
  5. <input type="password" />

属性：
maxlength=”3” ：能输入的最大长度
placeholder=”提示信息” ：占位提示
readonly ：为true 时只能读，不能改
disabled：禁用
autofocus：页面加载后，这个控件自动获取焦点
autocomplete：设置为off则不保存缓存记录，默认是会保存
image.png

单选框 radio

  1.     男<input type="radio" name="a" />
  2.     女<input type="radio" name="a" />

image.png
name相同时，选择就是互斥的。

属性：
checked：默认被选中

复选框 checkbox

  1.     <input type="checkbox" name="a" />篮球
  2.     <input type="checkbox" name="a" />足球

image.png
属性：
checked：默认被选中

文件上传 file

  1. <input type="file" accept=".xlsx"/>

image.png
accept：限定读取的文件后缀

多行文本框 textare

属性：
image.png

css属性：
image.png

下拉菜单 select option

  1.     <select name="abc">
  2.       <option value="1">111</option>
  3.       <option value="2">222</option>
  4.       <option value="3">333</option>
  5.       <option value="4">444</option>
  6.     </select>

下拉菜单选项，显示的是标签里面的内容，但是提交服务器，是提交value值
image.png
属性：
selected ：option里的属性，表示默认被选中
multiple ：select的属性，表示可以多选
size：同时显示多少项

按钮 buttun

也可以用input当做按钮，会更多一点
默认类型是重置submit

  1. <input type="button" value="获取验证码" />
  3. <button type="button">点击获取验证码</button>

重置按钮 reset

  1. <form action="" method="">
  2.     <input type="reset" value="重置" />
  3.   <button type="reset">重置</button>
  4. </form>

可以重置表单的内容，只能重置按钮所在表单内的元素

表单元素标题 label

  1.       <label for="inp">请输入</label>
  2.       <input type="text" placeholder="请输入关键字" name="wd" id="inp" />

label是为其他元素服务的，for后面跟元素的id，这样点击label就会转到该元素的功能

表单元素分组 fieldset

  1.     <fieldset id="">
  2.       <legend>123</legend> 
  3.       444
  4.     </fieldset>

image.png

提交按钮 submit

用于提交表单的信息

  1. <input type="submit" value="提交" />

其他相关

验证码

用img，里面的src链接到服务器，相当于向服务器请求一张图片，服务器后端动态生成一张，发过来，相当于就是验证码

HTML5

image.png
image.png image.png

====================

通用属性

禁用 disabled

元素名 name

用于提交表单时，提交元素名和它对应的值

聚焦边框 outline

image.png
一般用于去除聚焦时选中的蓝色边框

====================

表单提交

1、传统表单提交

  1.  <!-- 模拟百度，把输入框的内容提交给百度进行搜索 -->
  2.         <form action="https://www.baidu.com/s" method="get">
  3.       <input type="text" placeholder="请输入关键字" name="wd" />
  4.       <input type="submit" value="提交" />
  5.     </form>

点击提交按钮后，浏览器会根据action的路径，生成一个url路径，把表单form内有name的元素和对应的值，提交给服务器，
格式是：
协议投://主机/路径?name1=value1&name2=value2…..
例如：
https://www.baidu.com/s?sex=1&num=5

method：提交的方法，分为get 和 post
get：简单的提交方法，把参数拼接到浏览器后面，如上面的格式和例子
但服务器和浏览器对url的长度是有限制的，通常不超过1KB
post：高级的方法，把参数放在请求体里面发送给服务器，例如上传文件就只能用pose
查看请求体：
image.png
image.png

注意：
1、同一复选框下的选项，name要保持一致

好处：
1、利于SEO优化
2、高首屏渲染速度

弊端：
1、会进行页面跳转，意味着服务器要准备一个写好的页面作为返回（服务端渲染）
2、不方便表单数据验证（例如验证手机号是否输入正确等）

2、前后端分离

用JS获取表单内容，用正则表达式验证，然后通过Ajax请求发送给服务器，然后决定显示什么内容（前端渲染）