本文介绍: 开始,以

目录

前言

1.什么是form标签

1.1 基本介绍

1.2 form标签的相关属性

1.2.1 action属性

1.2.2 method属性

1.2.3 name属性

2.form标签的元素

2.1 input元素

2.1.1 text

 2.1.2  password

 2.1.3 submit

 2.1.4 radio

2.1.5 checkbox

2.1.6 button

2.1.7  html5新增的属性

2.2 input元素的其他属性

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

2.3  textarea元素

总结


前言

什么表单表单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 方法GET 或 POST):

get post
表单数据以值得方式追加到URL中 表单数据不会追加到URL,会隐藏显示
用于提交敏感数据 提交敏感数据

注释:GET 最适合少量数据提交浏览器会设定容量限制

1.2.3 name属性

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

2.form标签元素

2.1 input元素

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

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

2.1.1 text

 <input type=”text“&gt; 定义文本输入单行输入字段

列如

<form action=””&gt;

        用户名

        <input type=”text“&gt;

 </form&gt;

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

 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=”xingbievaule=”男”checked>男

<input type=”radio” name=”xingbievaule=”女”>女

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

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   时间选择器 
datatimeclocle    日期选择器    
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=”qinsadid=”dasdasvalue=”请输入您的选择“>

            <option value=””selected>重庆</option>

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

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

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

        </select>

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

2.3  textarea元素

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

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

 列如

 <textarea name=”” id=”” cols=”30″ rows=”10″>

 </textarea><br>

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

 


总结

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

原文地址:https://blog.csdn.net/m0_74429510/article/details/130557481

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36062.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注