第六章HTML表单API(上)

2020-11-15  本文已影响0人  恰我年少时

HTML表单主要用于收集用户输入或选择的数据,作为参数提交给远程服务器,提供了一些交互控件。
6.1.1表单标签<form>
定义表单框架
五个属性:aciton、method、name、cnctype、target
action="URL"
6.2 <input>标签
<input type="类型" name="名称"/>

6.2.1单行文本框text

6.2.2密码框password

6.2.3单选按钮radio
多个单选按钮可以组合在一起使用,为它们添加相同的name属性值即可表示这些单选按钮属于一个组
<input type="radio" name="gender" value="M" />男 //属性值checked默认选中
<input type="radio" name="gender" value="F" />女

6.2.4复选框checkbox
多个单选按钮可以组合在一起使用,为它们添加相同的name属性值即可表示这些单选按钮属于一个组
提交按钮submit
重置按钮reset
无动作标签button
该按钮被点击后无任何效果,需要和脚本配合使用,可以为其添加onclick事件,当点击该按钮时触发事件并执行指定的JavaScript代码
<input type="button" value="" onclick="alter(‘ hello html5 ’ )" />
如果要执行的JavaScript代码多,也可以在onclick事件中调用JavaScript函数名称,例如上述代码可改为
<input type="button" value="" onclick="test()" />
<script>
function test(){
alter( ' hello html ' );
}
<script>

6.2.5 图片提交按钮image
<input type="image" src="URL" alt="提交" />

6.2.6提交文件
< input type="file" name="自定义名称" />

6.3标记标签<label>
效果与普通文本一致,可以在被点击时为对应的表单控件生成焦点
<label for="name" >姓名</label>
<input type="text" name="name1" id="name1">
或者将内容和控件放在<label></label>之间

6.4 <textarea> 多行文本标签

6.5 列表标签 <select>
multiple属性会使 <select> 元素显示样式从默认下拉菜单变成列表框,并允许同时选中多个选项
最常用的做法是<select>元素配合若干个<option>使用,形成简易的的下拉菜单

6.6按钮标签<button>

6.7域标签<fieldset>和域标题标签<legend>
域标签<fieldset>将表单中多个元素分组显示
域标题标签<legend>为每个分组显示独立的标题

上一篇 下一篇

猜你喜欢

热点阅读