表单为网页提供一种交互功能,可用于搜集用户输入的不同类型的数据
1 表单
制作表单可以类比一下制作表格,列表。举例子制作表格时,一开始要定义<table>
元素标记开始定义表格,同样的制作表单,也是要定义一个元素标记开始定义表单,而这个元素就是<form>
元素了。
<form>
元素标记开始定义表单,几乎所有的块级元素元素都可以放在<form>
元素里。而真正实现提供用户输入信息不同方法的表单元素(如选项菜单),也就是内嵌在这里面了。 <form>
元素有action
和method
属性,用来定义服务器脚本运作的。
那么,表单里可以有些什么呢?
1.1 <input>
元素
<input>
表单元素在表单世界里扮演很多角色,说是最重要的表单元素也不为过了。<input>
元素是 空元素,而且有很多形态,根据属性tpye
的不同而不同。
每个输入字段必须设置一个
name
属性,因为服务器脚本通常会使用到这个名字。
1.1.1 文本输入(type=”text”)
当属性tpye="text"
时,用于定义输入单行文本,同时它还有一些可选属性:
- value 属性:定义初始值,默认值,提交会成功(
<input>
输入文本类型通用) - placeholder 属性:定义提示值,为填写表单的人提供一些提示,一旦点击该文本域,占位文本会消失,提交不会成功(
<input>
输入文本类型通用) - required 属性:这是适合于所有表单控件的属性,定义这个域是必要的(下面的元素元素介绍不再重复)
- maxlength 属性:定义最大字符数(对
<textarea>
元素无效) - size 属性:定义表单显示大小(最大的容纳字符数)
- list 属性:通过定义
<datalist>
元素,实现输入文本下拉预定义列表,list
属性必须为<datalist>
元素的id
<form>
<p>
名字:<input type="text" name="abc" size="400" value="123"/>
</p>
</form>
定义list
属性例子:
<form>
<input list="browsers" type="text" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
</datalist>
</form>
1.1.2 单选钮输入
当属性tpye="radio"
时,用于定义包含单选钮控件(相关选项共用一个name
)。
它还有一个必选属性value
来定义当前按钮的意义值,同时它还有个可选属性checked
,用来指定默认值。
<form>
<span>性别:</span><label for='man'>男</label><input type="radio" name="sex" value="man" id="man"><label for="women">女</label><input type="radio" name="sex" value="women" id="women">
</form>
1.1.3 复选框输入
当属性tpye="checkbox"
时,用于定义包含多个按钮只能单选的控件(相关选项共用一个name
)。
复选框与单选钮类似,都是拥有必选属性value
以及可选属性checked
。
<form>
<span>性别:</span><label for="man">男</label><input type="checkbox" name="sex" value="man" checked /> <label for="man">女</label><input type="checkbox" name="sex" value="woman"/>
</form>
<!-- 注意段落符号 -->
1.1.4 密码输入
当属性tpye="passwords"
时,与输入文本类似,只是在文本输入时会自行添加掩码。
1.1.5 提交输入
当属性tpye="submit"
时,定义提交按钮,用来提交表单给服务器脚本,其中value
属性值为按钮显示名字。
<form>
<p>
<input type="submit" value="提交" />
</p>
</form>
1.1.6 定义按钮
当属性tpye="button"
时,定义按钮,注意这里的定义按钮不是提交表单按钮,多数情况下是用于通过 JavaScript 启动服务器脚本
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<!-- 注意并没有form元素 -->
同时还有一些HTML5增加的新类型
1.1.7 数字输入
当属性tpye="number"
时,用于限制只能输入数字,而且通过一些可选属性还可以指定数字的范围。
- max 属性:定义最大值
- min 属性:定义最小值
- step 属性:定义数值间隔
<form>
<p>
<input type="number" name="sex" placeholder="2" />
</p>
</form>
1.1.8 其他类型的<input>
元素
<input>
元素的type
值还有很多,诸如 email,color,tel,url,range,date等等。想进一步了解可到W3C。
1.1.9 <label>
标签
<label>
标签可用于为 input
元素定义标注,当点击<label>
定义的标注文本时,会自动聚焦到相应的input
元素,其用法很简单,只要设置<label>
标签的for
属性与input
标签中的id
属性相等。
如:
<label for="age">性别:</label><input type="text" name="age" id="age" />
除了<input>
元素,<form>
元素还有一下内嵌表单元素。
1.2 文本区(textarea)
<textarea>
元素与<input>
元素的文本输入不同,文本区可以输入多行文本,不能限制字数,同时不是空元素,元素内容为文本区初始文本。而其中可选属性
- rows 属性:定义文本区行数,超过会生成滚动条
- cols 属性:定义文本区列数,超过会生成滚动条
- width属性使用百分数可以根据父元素的宽度改变
<form>
<p>
<textarea name="article" >有蚊子。。</textarea>
</p>
</form>
1.3 下拉列表选择(select)
<select>
元素会在页面中定义一个下拉列表的菜单控件,要与<option>
元素结合使用。
注意的是<option>
元素不是一个空元素(结合<input>
元素的选项按钮,试想一下,一个选项要有显示给用户的名字同时也要有返回服务器的返回值,而<option>
元素的value
属性值为返回值,元素内容为显示给用户的名字。)
<form>
<select name="food">
<option value="apple">苹果</option>
<option value="banana" >香蕉</option>
<option value="orange">橙子</option>
</select>
</form>
1.5 按钮(button)
<button>
元素与 <input type="button">
相比,提供了更为强大的功能和更丰富的内容,比方说按钮可以是文本或图像等。
<form>
<button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> 发表评论</button>
</form>