一.表单标签form

<form></form>，结合input使用

二.包含

action input select和optin textarea

1.action 跳转

路径分两种：

1.相对路径：当前文件和原文件相对的路径位置 .\demo03.html

2.绝对路径：从盘符开始描述该文件的路径路径+文件名 C:\Users\wx\Desktop\html\demo03.html

http协议：

1，GET会将用户输入的内容放到地址栏里面，使用GET请求不安全

2，POST不会将用户输入的内容放到地址栏里面，相对安全

2.input 标签

多种类型：

type = "text" -------- 文本框（单行）
type = "password“ -------- 密码框
type="submit" ------------- 提交的按钮
type = "radio" ----- 单选按钮
type = "checkbox" ----- 多选按钮
type = "button" -------- 普通的按钮
type = "reset" -------- 复位按钮
type = "image" ------ 图像按钮
type = "hidden" ----- 隐藏域（一般不建议使用）
type = "file" --------- 文本域

属性

name ------- 元素的名称 value ----- 元素的值 id -------- 元素的唯一标识符

size -------- 以字符的个数设定元素的宽度

maxlength --------- 元素接受字符个数的上限checked -------- 元素是否被选中

label 标签是为Input标签定义的标签（不会给用户展示任何样式）

readonly ---------- 输入的字段是只读，不能做任何修改 disabled ------ 禁用input元素，

被禁用的input是不可用，也不可以点击

required------- 提交信息的时候，如果你的Input是空的时候，会有相关的提示

autofocus -------- 当页面打开的时候，会自动获取光标

演示：

1.type = "text" -------- 文本框（单行）

用户名：<input type="text" name="密码" placeholder="请输入用户名"autofocus>

2.type = "password“ -------- 密码框

密码：<input type="password"name="密码" placeholder="请输入密码" required="请输入密码">

类型为 password 输入进的内容将以“*”形式显示。

当将鼠标移动到输入框中时，会有输入密码提示（placeholder）

3.type="submit" ------------- 提交的按钮

按钮上显示的字符，在value中控制

4.type = "radio" ----- 单选按钮

实现单选功能需要个选项属性中的name的值相等

选项中有checked的为默认选项

请选择您的性别:<input type="radio" value="男" name="a" checked="">男
<input type="radio" value="女"name="a">女</p>

5.type = "checkbox" ----- 多选按钮

请选择您的爱好: <input type="checkbox" value="足球" >足球
<input type="checkbox" value="篮球">篮球
<input type="checkbox" value="LOL">LOL
<input type="checkbox" value="韩剧">韩剧
<input type="checkbox" value="王者荣耀">王者荣耀

6.type = "button" -------- 普通的按钮

没有特殊功能，只是一个按钮，同样由value控制按钮上字符。

7.type = "reset" -------- 复位按钮

8.type = "image" ------ 图像按钮

使用某一张图片做按钮

用src引用图片

9.type = "file" --------- 文本域

3.select标签

下拉选择框

选择框中选择的顺序为<option></option>的顺序

默认第一个为框中显示的选择，可以通过selected更改

您的家庭住址：
<select >
<option>北京</option>

multiple可以使选择框展开

<select multiple="multiple">
您的收货地址：
<option>请选择收货地址 </option>
<option>江北</option >
<option>永川</option>
<option>万州</option>
</select>

4.textarea 标签

cols --------- 以字符个数设定的多行文本框的宽度

rows -------- 以字符个数设定的多行文本框的高度

请留下您的建议或意见：<textarea cols="50" rows="30" >
您的意见或建议
</textarea></p>

html中form表单相关推荐

[转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
vue中form表单支持回车键提交踩坑
平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...
HTML中form表单的应用
1.form表单标记 form表单以<form>标记开始,以</form>标记结束而在form表单中的属性 action 规定当提交表单时向何处发送表单数据. method ...
html中form表单提交和阻止表单提交的细节
如何阻止表单提交 HTML禁止表单提交方法源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...
Vue中form表单提交问题
关于input组件回车后,默认提交form表单出现的问题: <div class="searchArea"><form action="###&quo ...
javascript中FORM表单的submit()方法经验教训.
@author songfeng 因为JS内对象的方法实际上是存储语句的一个类似于指针的东西. 其指向了内存的一个位置, 也就是其函数的位置,当然也可以让其指向一个变量值 ...
antd如何获取表单的值_antd 父组件获取子组件中form表单的值
还是拿代码来讲吧,详情见注释子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...

html中form表单