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属性：下拉列表的默认选中