0


html的form标签的基本介绍及使用


前言

什么是表单?表单是html用与搜集不同类型的用户输入表单是一个区域,用来采集信息。


1.什么是form标签

1.1 基本介绍

form标签是html中重要的组成部分,是用与搜集不同类型的用户所输入的信息,form标签以<form>开始,以</form>结束。

1.2 form标签的相关属性

1.2.1 action属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

1.2.2 method属性

method 属性规定在提交表单时所用的 HTTP 方法(GETPOST):
getpost表单数据以值得方式追加到URL中表单数据不会追加到URL,会隐藏显示用于提交非敏感数据可提交敏感数据
注释:GET 最适合少量数据的提交。浏览器会设定容量限制。

1.2.3 name属性

一个页面上的表单可能不止一个,为了区分这些表单,就需要name 属性给表单命名,通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格。

2.form标签的元素

2.1 input元素

input元素是最重要的表单元素

input元素根据不同的type属性,可以变化为多种形态。

2.1.1 text

<input type="text"> 定义供文本输入的单行输入字段:

列如

<form action="">
    用户名:

    <input type="text">
</form>

以上代码在浏览器中看上去时这样的:

2.1.2 password

<input type="password"> 定义密码字段

列如

<form action="">
    密码:

    <input type="password">

</form>

以上代码在浏览器中看上去时这样的:

2.1.3 submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

列如

<form action="">
    <input type="submit">

</form>

以上代码在浏览器中看上去时这样的:

注释:submit可以通过value属性改变浏览器上所显示的内容

2.1.4 radio

<input type="radio"> 定义单选按钮。

列如

<input type="radio" name="xingbie"vaule="男"checked>男

<input type="radio" name="xingbie"vaule="女">女

以上代码在浏览器中看上去时这样的:

2.1.5 checkbox

<input type="checkbox"> 定义复选框。

列如

<input type="checkbox">足球

<input type="checkbox">篮球

<input type="checkbox">lol

<input type="checkbox">韩剧

<input type="checkbox">王者荣耀

以上代码在浏览器中看上去时这样的:

2.1.6 button

<input type="button> 定义按钮

列如

<input type="button" οnclick="alert('Hello World!')" value="Click Me!">

2.1.7 html5新增的属性

类型作用number 限制输入为数字才能生效 email 限制输入为邮箱才能生效 color 获取焦点后会弹出颜色选择器 date日期选择器会出现在输入框中range 能够显示滑块字段month 日期选择器(月份)week 日期选择器(周) time 时间选择器 datetime 时间选择器 datatime-clocle 日期选择器 tel 电话输入url 在提交时能够自动验证 url 字段。search 用于搜索字段(搜索字段的表现类似常规文本字段)

2.2 input元素的其他属性

checked:设置单选框、复选框,初始状态是选中,属性值仅有checked。

disabled:设置首次加载禁用该元素,属性值仅有disabled,表示该元素被禁用。

maxlength:设置文本框输入的最大字符数。

readonly:只读,表示文本框的内容不允许用户直接进行修改。

size:设置该元素的宽度。

src:设置图像域所显示的图像的URL。

2.2 select元素(下拉列表)与option元素

<select> 元素定义下拉列表:*<option>* 元素定义待选择的选项。

select元素与option元素通常配套使用

select的name属性可以指定提交名称,id可以配合<labl>的for属性实现鼠标点击优化.

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

你能通过multiple="multiple" 属性 ------- 以列表形式显示

列如

<select name="qinsad" id="dasdas" value="请输入您的选择">
        <option value=""selected>重庆</option>

        <option value="">上海</option>

        <option value="">北京</option>

        <option value="">杭州</option>

    </select>

以上代码在浏览器中看上去时这样的:

2.3 textarea元素

<textarea> 元素定义多行输入字段(文本域):

textarea表示一个多行纯文本编辑器,可以用于用户 。可以设置id属性与<lable>实现鼠标点击优化,cols和rows属性可以设置编辑器显示大小,name属性用于指定提交名称。

列如

<textarea name="" id="" cols="30" rows="10"> </textarea>

以上代码在浏览器中看上去时这样的:


总结

form表单时html的重要组成部分,以上时form标签的一些基本介绍。

标签: html servlet 前端

本文转载自: https://blog.csdn.net/m0_74429510/article/details/130557481
版权归原作者 小余132 所有, 如有侵权,请联系我们删除。

“html的form标签的基本介绍及使用”的评论:

还没有评论