html5——表单元素和属性

html使用表单向服务器提交请求，表单控件的主要作用就是收集用户的输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器上

“只有客户发展了，才有我们的生存与发展！”这是创新互联的服务宗旨！把网站当作互联网产品，产品思维更注重全局思维、需求分析和迭代思维，在网站建设中就是为了建设一个不仅审美在线，而且实用性极高的网站。创新互联对成都网站设计、成都网站建设、外贸网站建设、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。

html原有的表单及表单控件

form属性	说明
action	指定当单击表单的确认按钮，该表单被提交到哪个地址，可以是相对/绝对地址
method	指定提交表单时发送何种类型的请求属性值可以为get post
enctype	对表单内容进行编码所使用的字符集
name	指定表单的唯一名称，建议该属性值与id属性值保持一致
target	使用哪种方式打开目标URL，该属性值可以是_blank _parent _self _top
post:传送的数据量比较大，用户在地址栏里看不到参数，安全性较高
get:直接在地址栏中输入访问地址所发送的请求

使用input元素，input元素是表单空间当中功能最为丰富，如下几种输入元素都是通过<input>元素生成

单行文本框 text	单行文本框用于接受用户的输入
密码输入框 password	密码框文字不可见
隐藏域 hidden	不接受用户输入，也不能生成可视化部分
复选框 checkbox（radio 单选框）	供用户选择
图像域 p_w_picpath	和提交按钮的作用基本一样，单击表单被提交
文件上传域 file	允许用户浏览本地磁盘文件，并将该文件上传到服务器
提交 submit	提交按钮
重设 reset	重置按钮

input核心属性

checked	设置单选框、复选框初识状态是否处于选中状态，该属性只能是checked,选中
disabled	b表示该元素禁用，该元素无法获得焦点
maxlength	该属性值是一个数字，指定文本矿中允许输入的最大字符字数
size	指定该元素的宽度
readonly	文本框中的值不允许用户更改
src	指定图像域所显示图像的URL

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表单 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="get">
    单行文本框：<input id="username" name="username" type="text" /><br />
    不能编辑的文本框：<input id="username2" name="username" type="text"
        readonly="readonly" /><br />
    密码框：<input id="password" name="password" type="password" /><br />
    隐藏域：<input id="hidden" name="hidden" type="hidden" /><br />
    第一组单选框：<br />
    <input id="color" name="color" type="radio" value="red"/>
    <input id="color2" name="color" type="radio" value="green" />
    <input id="color3" name="color" type="radio" value="blue"/><br />
    第二组单选框：<br />
    <input id="gender" name="gender" type="radio" value="male"/>
    <input id="gender2" name="gender" type="radio" value="female" /><br />
    两个复选框：<br />
    <input id="website" name="website" type="checkbox" 
        value="leegang.org" />
    <input id="website2" name="website" type="checkbox" 
        value="crazyit.org" /><br />
    文件上传域：<input id="file" name="file" type="file"/><br />
    图像域：<input type="p_w_picpath" src="p_w_picpaths/wjc.gif" alt="疯狂Java联盟"/><br />
    下面是四个按钮：<br />
    <input id="ok" name="ok" type="submit" value="提交" />
    <input id="dis" name="dis" type="submit" value="提交"
        disabled="disabled" />
    <input id="cancel" name="cancel" type="reset" value="重填"/>
    <input id="no" name="no" type="button" value="无动作" />
</form>
</body>
</html>

使用label定义标签：

标签与表单空间关联有两种方式

①隐式使用for属性：指定<label>元素的for属性值为所关联表单空间的id属性值

②显示关联：将普通文本、表单空间一起放在<label>元素内部即可

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> label元素 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="get">
    <label for="username">单行文本框：</label>
    <input id="username" name="username" type="text" /><br />
    <label>密码框：<input id="password" name="password" type="password" />
    </label><br />
    <input id='ok' type="submit" value="登录疯狂Java联盟" />
</form>
</body>
</html>

列表框和下拉菜单:

用于创建列表框或下拉菜单，该元素必须要和<option>元素结合使用，属性：multiple设置是否可以多选，size 指定列表框内可以同时显示多少个列表项

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> select元素 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="post">
    下面是简单下拉菜单：<br />
    <select id="skills" name="skills">
        <option value="java">Java语言</option>
        <option value="c">C语言</option>
        <option value="ruby">Ruby语言</option>
    </select><br /><br /><br />
    下面是允许多选的列表框：<br />
    <select id="books" name="books" 
        multiple="multiple" size="4">
        <option value="java">疯狂Java讲义</option>
        <option value="android">疯狂Android讲义</option>
        <option value="ee">轻量级Java EE企业应用实战</option>
    </select><br />
    下面是允许多选的列表框：<br />
    <select id="leegang" name="leegang" 
        multiple="multiple" size="6">
        <optgroup label="疯狂Java体系图书">
            <option value="java" label="aaaaaaaa">疯狂Java讲义</option>
            <option value="android">疯狂Android讲义</option>
            <option value="ee">轻量级Java EE企业应用实战</option>
        </optgroup>
        <optgroup label="其他图书">
            <option value="struts">Struts 2.1权威指南</option>
            <option value="ror">RoR敏捷开发最佳实践</option>
        </optgroup>
    </select><br />
    <button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

textarea定义文本域：

cols 指定文本域的宽度；

rows 指定文本域的高度；

disabled 指定禁用该文本域

readonly 指定该文本域只读

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 多行文本域 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="post">
    简单多行文本域：<br />
    <textarea cols="20" rows="2"></textarea><br />
    只读的多行文本域：<br />
    <textarea cols="28" rows="4" readonly="readonly">
疯狂Java讲义
轻量级Java EE企业应用实战
    </textarea><br />
    <button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

html5新增的属性与元素

form属性指定属于哪一个form	<textarea name="desc" form="addform"></textarea>
formaction 提交到不同的action	<input type="submit" value="注册" formaction="regist">
formxxx 与formaction相似	<input type="submit" formaction="regist" formmethod="get">
autofocus 获得焦点	<input type="text" autofocus>
placeholder 提示信息	<input type="text" placeholder="请输入用户名">
list 必须与datalist结合使用	list用法见下
autocomplete 与list结合使用	on 打开antocomplete 文本框下方会显示下拉菜单

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> list属性 </title>
</head>
<body>
<form method="post" action="buy">
    请输入图书：<input type="text" name="name" list="books"/><br/>
    <input type="submit" value="购买"/>
</form>
<datalist id="books">
    <option value="java">疯狂Java讲义</option>
    <option value="ee">轻量级Java EE企业应用实战</option>
    <option value="android">疯狂Android讲义</option>
</datalist>
</body>
</html>

本文名称：html5——表单元素和属性
链接地址：/article2/ihgjoc.html

成都网站建设公司_创新互联，为您提供Google、电子商务、网站导航、网站营销、网站建设、小程序开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容