HTML基础之三(form表单)
.表单form
单是一个包含表单元素的区域。
表单能够包含 input 元素,textarea、select、fieldset、legend 和 label 元素。
表单使用标签(<form>)定义。
表单用于向服务器传输数据。
<form name="form1" action="URL" method="get">
用户名:<input type="text" name="uname" />
密 码:<input type="password" name="passwd" />
</form>
属性 说明
name 表单的名称
action 表单提交地址
method 表单数据提交的方式 (get ,post)
enctype MIME类型
target 打开方式
<input>(表单元素:输入框)
属性 说明
type input元素类型
name input 元素的名称
value input 元素的值
size input 元素的宽度
readonly 是否只读
maxlength 输入字符的最大长度
disabled 是否禁用
文本框:<input type="text" name="username" value="" />
密码框:<input type="password"name="passwd"/>
单选框:<input type="radio"name=" "value=" "checked />
复选框:<input type="checkbox"name="" value=" "/>
隐藏域;<input type="hidden" name="" value=""/>
按钮:
<input type="button" name="btn" value="确定"/>
<input type="submit" name="comit" value="提交"/>
<input type="reset" name="reset" value="重写"/>
<input type="image"name="img_btn" src="btn.gif"/>
上传文件:<input type=”file” name=””/>
注意:
利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。
说明:
multiple 控制是否上传多文件
textarea(表单元素:多行文本域)
<textarea name="content" rows="5" cols="50"> </textarea>
属性 说明
name 元素的名称
rows 指定文本框的高度
cols 指定文本框的宽度
select(表单元素:下拉框)
<select name="city">
<option value="0">请选择</option
<option value=“bj” selected >北京</option>
<option value="gz">广州</option>
</select>
属性 说明
name 下拉列表框的名称
size 下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected 设置默认选中的选项
value 选项的值
optgroup(表单元素:下拉框分组)
optgroup 元素用于组合选项
<select name="city" multiple>
<optgroup label="广东">
<option value="1">广州</option>
</optgroup>
</select>
属性 说明
label 指定组合选项名称
Label : lable 标签的作用是将输入项或选项及其标签文字关联起来。
例:
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
HTML5的表单所有Input类型 type

HTML基础之三(form表单)的更多相关文章
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- 前端基础:form表单提交
今天介绍下form表单提交经常用到的表单元素. 1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lan ...
- Django基础之Form表单验证
Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from ...
- 前端HTML基础之form表单
目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...
- Django基础之form表单
1. form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时, 我们在好多场景下都需要对用户的输入做校验, 比如 ...
- Django基础之form表单的补充进阶
1. 应用Bootstrap样式 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- form表单那点事儿(上) 基础篇
form表单那点事儿(上) 基础篇 做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了fo ...
- Django基础,Day5 - form表单投票详解
投票URL polls/urls.py: # ex: /polls/5/vote/ url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, ...
- form表单基础知识
form 元素是块级元素 ------------------- ------------------- ----------------------------------------------- ...
随机推荐
- pytest学习笔记(一)
这两天在学习pytest,之前有小用到pytest,觉得这个测试框架很灵巧,用在实现接口自动化(pytest+requests)非常的轻便,然后很有兴致的决定学习下,然后又发现了pytest-sele ...
- Ajax请求如何设置csrf_token
1. 方式一 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送. $.ajax({ url: "/cookie_ajax/", typ ...
- sed基础
sed 文本流编辑的 行编辑器 hold space :保持空间.仓库,半成品 一次从文件中读取一行,放到自己编辑的内存缓冲空间即模式空间,不会编辑原文件:根据所给定的命令在模式空间中做编辑处理, ...
- [题解] [CF 1250J] The Parade
题面 题目大意: 给定一个 \(n\) , 所有军人的数量均在 \([1, n]\) 给定 \(a_i\) 代表高度为 \(i\) 的军人的个数 你要将这些军人分成 \(k\) 行, 满足下面两个条件 ...
- Open Live Writer 显示不出来代码着色插件解决办法
下载地址: Open Live Writer 插件更新 下载后要把下面这5个文件,全部解除锁定(右键属性打开) Memento.OLW.Plugins.dll OLWPlugins.css OpenL ...
- Linux设备驱动程序 之 延迟执行
长延迟 有些驱动程序需要延迟比较长的时间,即长于一个时钟滴答: 忙等待 如果想把执行延迟若干个时钟滴答,或者对延迟的精度要求不高,最简单的实现方法就是一个监视jiffies计数器的循环:这种忙等待的实 ...
- ArcGIS超级工具SPTOOLS-编号工具
1.1 整库更新BSM 输入一个MDB或GDB,将所有的要素类和表,按某个字段BSM,BSM不存在,会自动创建,从某个开始,顺序编号. 1.2 更新BSM 根据自己输入的多个表或要素,可以自己编号 ...
- hbase部署经验与坑总结
1.本地单机部署hbase,想要使用独立zookeeper,不使用自带的 vim conf/hbase-env.sh export HBASE_MANAGES_ZK=false 设置不使用自带zook ...
- 《你不知道的JavaScript(上)》笔记——作用域闭包
当函数可以记住并访问所在的词法作用域时, 就产生了闭包, 即使函数是在当前词法作用域之外执行. function wait(message) { setTimeout( function timer( ...
- vue开发(一)安装
1.安装nodejshttps://nodejs.org/zh-cn/ 2.vs2019 工具-获取工具和功能 勾选nodejs开发并安装 3.新建基于vuejs web应用程序 4.右键项目在此处 ...