HTML常用表单标签
1.表单元素 <form>
HTML 表单用于收集用户输入。
代码示例:
<form action="http://xxx.xxx.xxx/xxx.php" method="get">
<!--其他表单标签-->
</form>
常用属性解释:
action
属性定义在提交表单时执行的动作通常,表单会被提交到 web 服务器上的网页。在上面的例子中,指定了某个服务器脚本来处理被提交表单.
method
属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
2.输入input
2.1 文本输入框 <input type="text" />
创建一个最简单的文本输入框:
代码示例:
<input type="text">
实际效果图:
我们可以在这个文本框里面输入任意的数字、字符或符号
(1)创建一个带有提示文字的文本输入框:
代码示例:
<input type="text" placeholder="请输入你的姓名">
placeholder
属性规定用以描述输入字段预期值的提示,该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。
实际效果图:
(2)创建一个带有默认值的文本输入框:
代码示例:
<input type="text" value="hello">
value
属性规定输入字段的初始值。
实际效果图:
(3)创建一个带有默认值且不能修改的文本输入框:
代码示例:
<input type="text" value="hello" readonly>
readonly
属性规定输入字段为只读(不能修改),readonly 属性不需要值。它等同于 readonly="readonly"。
(4)创建一个禁用的文本输入框:
<input type="text" value="" disabled />
实际效果图:
disabled
属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。disabled 属性不需要值。它等同于 disabled="disabled"。
(5)创建限制输入字数的文本输入框:
代码示例:
<input type="text" value="" maxlength="8" />
maxlength
属性规定输入字段允许的最大长度,如设置 maxlength 属性,则输入控件不会接受超过所允许数的字符。
如上代码:我们输入超过8个文字后,再输入任意的文字,文本输入框都不会接收。
2.2密码输入框 <input type="password" />
创建一个密码输入框,代码示例:
<input type="password" />
实际页面效果:
密码输入框的本质还是一个文本输入框,只不过密码输入框在用户输入字段时,会自动的将输入的文字用星号或实心圆替换,避免用户密码直接被其他人看到。
备注:适用在文本输入框上的属性同样也适用于密码输入框。
2.3单选按钮 <input type="radio" />
单选输入或单选按钮,通常用与用户从多个选项中选择一个。
代码示例:
<p>请选择您的性别:</p>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
实际效果图:
注意事项:
- 同一组选项name属性要保持一致
- 选定的选项在表单数据提交时提交的格式为 nameVlaue:'selectVlaue',如上代码表单提交时提交的值:sex:male
2.3.1创建一个默认选中的单选按钮
代码示例:
<p>请选择您的性别:</p>
<input type="radio" name="sex" value="male" checked />男
<input type="radio" name="sex" value="female" />女
checked
属性规定按钮是否默认选中状态。checked 属性不需要值。它等同于 checked="checked"。
2.4多选按钮 <input type="checkbox" />
多选按钮,用户可以从多个选项中选择一个或多个
<input type="checkbox" name="vehicle" value="pen" />I have a pen
<br />
<input type="checkbox" name="vehicle" value="apple" />I have an apple
实际效果图:
多选按钮也可以通过checked属性设置多选按钮为默认选中状态,多选的情况下表单提交时,多选按钮提交的值是用英文的逗号隔开的,例如如上表单在提交时, vehicle=pen&vehicle=apple
2.5.按钮 Button
html中,按钮通常分为普通按钮、提交按钮、重置按钮,其中提交和重置按钮用于表单数据的提交和清空重置,一般放在form表单里面,普通按钮可以随意。
(1)普通按钮<input type="button" />
代码示例:
<input type="button" value="按钮1" />
实际页面效果:
value
属性可以设置按钮上显示的文字。按钮可以可以通过disabled
属性来设置是否禁用。
(2)提交按钮 <input type="submit" />
表单提交按钮通常位于form表单内,点击后,会将用户输入的数据提交到指定的地址去处理
代码示例:
<form action="#" method="get">
<input type="text" name="userName" placeholder="请输入用户名" />
<input type="password" name="passWord" placeholder="请输入密码" />
<input type="submit" value="提交" />
</form>
实际效果图:
备注:
- 上述代码使用的是get方式提交的输入
- get方式提交数据时会在提交的目标URL地址后紧跟数据字段
- value、disabled属性也适用于submit按钮
(3)重置按钮<input type="reset" />
重置(清空)按钮通常用于用户输入表单数据后一键清空。也需要放在form表单内使用
代码示例:
<form action="#" method="get">
<input type="text" name="userName" placeholder="请输入用户名" />
<input type="password" name="passWord" placeholder="请输入密码" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
备注:value、disabled属性也适用于reset按钮
3.文本域<textarea></textarea>
文本输入框<input type="text" />
在用于字数不多的文本输入时没有什么问题,但是当用户需要输入多行、多字数文本时,文本输入框就会显得很不友好。因此多行文本的输入,我们应该考虑使用文本域。
代码示例:
<input type="text"/>
<br />
<br />
<textarea></textarea>
实际页面效果:
文本域可容纳无限数量的文本,但默认的文本域视觉大小比较小,可以通过文本域右下角的“小三角”拖动来调节大小。也可以通过cols
和rows
属性来设置文本域的尺寸,但是cols
属性设置不太标准,最好的方法是通过CSS设置。
3.1设置里默认大小的文本域
<textarea></textarea>
<textarea cols="30" rows="6"></textarea>
实际页面效果:
rows
属性用于设置文本域可见文本的行数。
cols
属性用于设置文本域可见区域每行文字的个数,但是这个数量因为中英文差异不太标准。
此外,placeholder
name
maxlength
disabled
属性也适用于文本域。
4.下拉列表 <select></select>
下拉列表和无序列表类似,都是一种组合类型的标签,通常用于省市区的选择。
代码示例:
<span>所在城市:</span>
<select name="city">
<option value="nanjin">南京</option>
<option value="hangzhou">杭州</option>
<option value="shanghai">上海</option>
<option value="hefei">合肥</option>
</select>
实际页面效果:
4.2默认选中某一项
默认的下拉列表选中的是第一项,如果需要指定其他选项,可以通过selected
属性设置.
代码示例:
<span>所在城市:</span>
<select name="city">
<option value="nanjin">南京</option>
<option value="hangzhou">杭州</option>
<option value="shanghai" selected>上海</option>
<option value="hefei">合肥</option>
</select>
实际页面效果:
HTML常用表单标签的更多相关文章
- form常用表单标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- flask表单标签
环境:python2.7+flask+flask_wtf 内容:flask的部分常用表单标签 test.py # -*- coding: utf-8 -*- # flask web_form 表单控件 ...
- HTML学习二_HTML常用的行级标签,常用实体字符及表单标签
HTML常用的行级标签(行内元素)不独占一行### 有语义的行内元素 #### HTML链接 a标签 ```angular2html<a href="链接地址">链接文 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form
表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...
- 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...
- Unit 2.前端之html--table(表格),form(表单)标签
一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
- 5.22 HTML 列表标签和表单标签
1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li: listitem 列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- struts2:表单标签
目录 表单标签1. form标签2. submit标签3. checkbox标签4. checkboxlist标签5. combobox标签6. doubleselect标签7. head标签8. f ...
随机推荐
- 三十三、www服务apache软件
1.前面提到:www服务是一种网页服务,但是网页服务也是需要软件来支撑的,通过软件的形式展示需要的网页,返回给浏览器. www服务软件排名:http://w3techs.com/technologie ...
- 54)PHP,访问修饰符
类外就是你再实例化成对象的时候 用你类里面的变量 继承的类内, 就是子类里面,但是实例化对象时,不能用 本类内, 只在本类的定义时用,子类不能用.
- 31)PHP,对象的遍历
对象的遍历: 对象也可以可以使用foreach语句进行便利,有两点注意: 1,只能便利属性.(所以,这个就解决了,为啥之前的数据库类,我只是看到了一些属性名字,而没有得到我的属性值) 2,只能便利“看 ...
- mysql模糊匹配like及批量替换replace
1.mysql 模糊匹配 like 与 not like 用法 : SELECT * FROM `user` where `nickname` LIKE '%测试%' SELECT * FROM `u ...
- 浅谈Java中的泛型
泛型是Java自JDK5开始支持的新特性,主要用来保证类型安全.另外泛型也让代码含义更加明确清晰,增加了代码的可读性. 泛型的声明和使用 在类声明时在类名后面声明泛型,比如MyList<T> ...
- vue实现动态绑定class--多个按钮点击一个有一个
<template> //v-for循环出来多个按钮,便于获取index <span v-for="(item,index) in list" : ...
- [LC] 22. Generate Parentheses
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- Linux SSH 使用密钥登陆
Linux SSH 使用密钥登陆 通常我们登录 Linux 服务器,我们需要使用密码进行登录,但是密码存在被暴力破解的可能. 可以将默认服务端口 22 改成其他不常用的端口. 可以设置非常复杂的密码. ...
- 【Linux_Shell 脚本编程学习笔记六、shell的数值运算】
1.bc 命令的用法(可以整数也可以小数): bc是 UNIX下的计算器,它也可以用在命令行下面: 例: 给自变量 i 加 1 [root@docker Demo_test]# i= [root@do ...
- 关于angular2跳路由防止页面刷新的做法(Angular2路由重载)
simpleReuseStrategy.ts // 创建重用策略 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStr ...