Web前端学习—基础篇(28)_表单如何使用、表单的控件都有哪些

4.23、表单

用于采集用户输入数据 发送服务器 实现用户和服务器之间数据交互
一个完整表单包含:表单域、表单元素--表单控件、提示信息--文本

4.23.1、表单标签--form 块级元素

用于声明表单,定义数据采集范围

  • 一个页面中可以有多个form标签,多个form标签为并列关系,不能嵌套
  • 用户向服务器提交数据时,一次只能提交一个表单中的数据;如果需要提交多个表单,可以使用JavaScript的异步交互方式实现
<form action="提交表单到何处" method="get|post" name="表单名称">表单元素</form>
    method属性 提交表单时所用的http方法,默认get
        get方式:将数据作为URL地址一部分发送给服务器;请求数据可以被缓存,能够保留在浏览器的历史记录中,能作为书签被收藏;有长度限制;安全性较低
        post方式:将数据隐藏在HTTP数据流中传输;请求数据不会被魂村,不能保留在浏览器的历史记录中,不能作为书签被收藏;对数据长度没有限制;安全性比get方式高

4.23.2、表单控件

<input type="" name="" value="" />  行块级元素
type属性:设置不同控件类型
name属性:表单字段名;如果不设置name属性,输入框的内容无法随表单一起提交
  • 单行文本输入框
<input type="text" value="初始值" name="">
  • 密码框
<input type="password" value="初始值" name=""  placeholder="提示信息">
  • 单选按钮
<input type="radio" name="" value="">
    name属性:可以实现单选按钮的互斥
    value属性:必不可少,表示选项代表的值

<!-- 将文字与按钮关联起来,点击文字选中,使用label标签,for内的内容和单选框内的id保持一致 -->
<label for="关联的单选框id的内容">文字</label>
<!-- 举例 -->
 性别:<input type="radio" name="sex" value="男" id="sex1">
      <label for="sex1">男</label>
      <input type="radio" name="sex" value="女" id="sex2">
      <label for="sex2">女</label>
  • 复选框
<input type="checkbox" name="" value="">
    value属性:必不可少,表示选项代表的值

checked属性:用于单选按钮和复选框的默认选中,可以直接在input标签中写checked或checked="checked"

  • 提交按钮
<input type="submit" value="提交">
value属性:修改按钮上的文字
  • 重置按钮
<input type="reset" value="重置">
value属性:修改按钮上的文字
  • 普通按钮
<input type="button" value="普通按钮">
value属性:修改按钮上的文字
  • 上传文件
<input type="file">
    不能设置value属性
  • 图片形式按钮
<input type="image" src="图片地址" alt="替换文本" width="" height="">
input的类型为image时,必须设置src属性和alt属性
  • 隐藏域
<input type="hidden" value="">
    对用户不可见,目的是收集或发送信息到服务器

4.23.3、button标签

默认为submit

<button>提交按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

4.23.4、select下拉列表 行块级元素

<select>
    <option value=""></option>
    <option value=""></option>
</select>
    value属性:选项代表的值
    selected属性,用于下拉列表的默认选中,属性写在option标签,直接写selected或selected="selected"

4.23.5、多行文本域

<textarea cols="1" rows="2"></textarea>
cols属性:宽度
rows属性:行数,一半不用,用宽高实现尺寸

textarea{
    resize:none; /* 禁止用户手动调整多行文本域的大小 */
}

4.23.6、label标签

用来扩大点击范围,一般用于单选、复选按钮中

<label><input type="radio">男</label>
<input type="checkbox" id="a"><label for="a">吃饭</label>

4.23.7、表单属性

  • disabled属性:禁用input元素,被禁用的元素不可用,不可点击,不会提交

  • readonly属性:只读,不能修改,可以被提交

  • size属性:控件的长度,

  • maxlength属性:允许输入的最多字符数

  • checked属性:单选按钮和复选框的默认选中

  • selected属性:下拉列表的默认选中

posted @ 2021-03-27 21:29  泰初  阅读(929)  评论(0编辑  收藏  举报