首页 > 代码库 > HTML基础复习（八）表单

HTML基础复习（八）表单

2024-09-15 13:26:49   216人阅读

表单-----<form>用于收集不同类型的用户输入
最常用的输入元素
　　1、<input>,根据类型type属性可以设置不同的输入类型：
　　　　type="text"：文本域，文本域的缺省宽度是20个字符
　　　　type="password"：密码字段
　　　　type="button"：按钮
　　　　type="radio"：单选按钮
　　　　type="checkbox"：复选框
　　　　type="submit"：提交按钮
　　　　type=“number”：数字输入框
　　　　type=“range”：数字范围滑动条
 
　　2、<select>,下拉选择框
　　　　<select name="sex">
　　　　　　<option value="http://www.mamicode.com/boy">boy</option>
　　　　　　<option value="http://www.mamicode.com/girl">girl</option>
　　　　</select>
  • 默认显示第一个option；要预设下拉框，在对应的标签<option>内添加属性selected即可
  • 属性multiple和size可设置多选，但还是尽量使用复选框
 
　　3、<textarea>多行文本输入框
　　　　<textarea rows="10" cols="30">
　　　　　　我是一个文本框。
　　　　</textarea>
 
　　4、<label>为input元素标记
  • 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，优化鼠标点击事件易用性，它的for属性应当与相关元素的ID相同。
 
  • 它还可以在表单以外，但它仍然属于某一个表单，通过form属性指定它关联的表单
　　5、<fieldset>将表单内的相关元素分组。
　　　　<fieldset> 标签会在相关表单元素周围绘制边框。
　　　　<legend>标签为fieldset元素定义标题
 
　　6、<datalist>预先定义输入框input的可能选项
 
　　　　<input list="browsers">
　　　　　<datalist id="browsers">
　　　　　　<option value="http://www.mamicode.com/Internet Explorer">
　　　　　　<option value="http://www.mamicode.com/Firefox">
　　　　　　<option value="http://www.mamicode.com/Chrome">
　　　　　　<option value="http://www.mamicode.com/Opera">
　　　　　　<option value="http://www.mamicode.com/Safari">
　　　　</datalist>
 

HTML基础复习（八）表单


联系
我们