表单的一些元素

最新推荐文章于 2024-08-23 15:53:59 发布

李℘⸙⁵²⁰

最新推荐文章于 2024-08-23 15:53:59 发布

阅读量74

点赞数

文章标签： servlet html javascript css

本文链接：https://blog.csdn.net/weixin_67279162/article/details/126840314

版权

表单

1.表单元素

表单区域--form

作用:

定义HTML表单域,是一个包含表单元素的区域.

2.属性

action属性

action="数据提交地址"
  注意:如果省略 action 属性,则action被设置为当前页面

作用:把数据提交到后台或者服务器

注意:如果省略action属性,则会被设置为当前页面

target属性

作用:设置目标地址的打开方式

取值:_self当前窗口

_blank新窗口

method

作用:method:GET/POST提交表单时所用的HTTP方法,默认是GET方法

取值:

get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。（通过地址栏提交）

post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。将数据隐藏在http数据流中传输（通过后台提交）

input表单控件

表单元素是允许用户在表单中输入内容的标签,比如:文本域,下拉列表,单选框,复选框

概述:input是最重要的表单元素.type属性取值不同,可以展示不同的表单样式

作用:用来定义不同种类的输入控件

语法:

<input type="text" name="" value="">
type属性:表示不同类型的表单控件
name属性：表单的字段名，如果不设置name属性，输入框的内容无法随表单一起提交
value属性：规定输入字段的初始值

常用类型

1.type="text"

作用:用于文本输入的单行输入字段

<input type="text"  placeholder="请输入账号">
    type='text'
    placeholder：提示信息

2.type="password"

作用:定义密码字段

默认掩码处理

<input type="password" value="密码">

3.type="radio"

作用:定义单选按钮,允许用户在有限数量的选项中选择其中之一(需要指定单选按钮)

<input type="radio">
<input type="radio" name="" value="">
name属性：可以实现单选框的互斥效果，name设置的属性值要一样，即选男不能选女，选女不能选男
value属性：必不可少的，表示选项代表的值

4.type="checkbox"

作用:定义复选框,允许用户在有限数量的选项中选择0个或多个选项

<input type="checkbox">
<input type="checkbox" name="" value="">
name属性：name设置的属性值要一样，实现多个选项保存在同一个字段中
value属性：必不可少的，表示选项代表的值
checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'

5.type="submit"

作用:定义用于向表单处理程序提交表单的按钮

注意:省略了提交value属性,该按钮将显示默认文本"提交"(不同浏览器表现不同)

 <input type="submit" value="提交按钮">

6.type="button"

作用:定义普通按钮

提示:不能提交文字,默认没有文字

value属性:定义普通按钮的文字

<input type="button" value="按钮">

7.type="reset"

作用:清除表单控件的输入信息

value属性:定义普通按钮的文字

8.type="reset"

作用:清除表单控件的输入信息

value属性:修改按钮的文字,默认是重置

 <input type="reset" value="重置">

9.type="image"

作用:定义图像形式的提交按钮

属性:

src="': 指定图片地址

alt="":指定替换文本

提示:提示：src 属性和alt 属性必须与 <input type="image"> 结合使用，一般不建议使用

width:设置宽

height:设置高

<input type="image" src="./images/4.jpg" alt="图片" width="100" height="200">

10.type="file"

作用:用于文件上传

注意:要实现文件的上传,必须在form标签中添加enctype="multipart/form-data"

<input type="file">

textarea标签

作用:用于留言板等需要输入大量类名

语法:

<textarea>初始值</texarea>

注意:不能够使用value属性规定他的初始值,初始值在开始和结束标签中设置

<textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>
 resize: none禁止用户手动调整多行文本域的大小
          cols属性是表示宽度
          rows属性是表示行数

select属性

概述:

select标签用于定义下拉列表,下拉列表通过option标签定义选项

语法:

下拉列表
        <select name=""size="2">         
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="天津">天津</option>
        </select>
        option:列表项
        value属性：必不可少的，表示选项代表的值
        selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'
        size属性：控件长度,规定下拉列表中可见选项的数目

表单元素标注

为input元素定义标注

通过<label>标签的for属性值与相关元素的id值相同,绑定表单元素

作用:是扩大点击范围,提高用户体验

一般与单选按钮或者复选框组合使用

语法

<label for="id名"></label>

效果描述

当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件中

<input type="radio" id="man1" name="man" value="男">
    <label for="man1">男</label>

    <input type="checkbox" name="" id="woman" value="女">
    <label for="woman">女</label>

   <label for="man"> 
       <input type="radio" name="sex" value="男" checked id="man">男
     </label>

表单属性

        1、action 属性定义在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。如果省略            action 属性，则 action 会被设置为当前页面。
       2、method="GET/POST":提交表单时所用的HTTP方法，默认是GET方法
       3、checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'
       4、selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'          5、value属性：规定输入字段的初始值。
       6、readonly属性:只读属性,只能读，不能修改
       7、disabled属性:禁用属性，表示元素不可用，不可以点击
       8、maxlength属性：允许输入的最多字符
       9、size属性：控件长度,规定下拉列表中可见选项的数目
       10、placeholder 提示用户输入信息

文本框和按钮不对齐现象

input设置左浮动

因为按钮的高度比input的高度大2px

垂直对齐:按钮设置高度比文本框的高度大2px

左右对齐:文本框和按钮设置浮动

input {
      /* 左右对齐 */
      float: left;
    }
    .sub {
      /* 垂直对齐 */
      /* 按钮的高度比文本框的高度大2px */
      height: 21px;
    }

-------------------------------------------------------------------------------
input {
      /* 左右对齐 */
      float: left;

      height: 50px;
    }

    .sub {
      /* 垂直对齐 */
    /* 文本框和按钮的高度要一样 */
      height: 56px;
     
    }
结构：

<input type="text" placeholder="text">
  <input type="submit" class="sub">
  <input type="button" class="sub" value="普通按钮">
  <input type="reset" class="sub">

css用户页面属性

轮廓线

概述:轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用

轮廓属性指定元素轮廓的样式,颜色和宽度

outline简写

在一个声明中设置所有的轮廓属性

可以设置的属性分别是(按顺序)

outline-color outline-style outline-width

说明:

轮廓样式 outline-style

轮廓颜色 outline-color

轮廓宽度 outline-width

取值:参考边框

清除设置input ,textarea的轮廓线

 input, textarea {
            /* 清除轮廓线 */
            outline: none;
            /* 设置轮廓线  */
            outline: 1px solid red;
        }

用户界面

文本域的resize属性:用户是否可以对元素尺寸进行调整

默认值 auto

default 通常是一个箭头

text 显示为光标

pointer 光标呈现为指示链接的指针(一只手)

move 此光标指示某对象可被移动

其他值

e-resize    此光标指示矩形框的边缘可被向右（东）移动。
ne-resize   此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize   此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize    此光标指示矩形框的边缘可被向上（北）移动。
se-resize   此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize   此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize    此光标指示矩形框的边缘可被向下移动（南）。
w-resize    此光标指示矩形框的边缘可被向左移动（西）。
text    此光标指示文本。
wait    此光标指示程序正忙（通常是一只表或沙漏）。
help    此光标指示可用的帮助（通常是一个问号或一个气球）