表单标签及表单属性:
在HTML5中,使用<form>标签来实现表单的创建,该标签用与在网页中创建表单区域,属于容器标签,其他表单标签需要在它的范围内才有效<input>便是其中一个。
<form>标签的属性:
action:此属性是指服务器上的处理表单输出的程序。语法:action="URL"如果action属性的值为空,则默认表单提交到本页。
method:此属性告诉浏览器如何将数据发送给服务器,它指定发送给服务器数据的方法。语法:method=(get |post)。
1.文本框:
<form method="post" action="">
<input name="text" type="text"/>
</form>
2.密码框:
<form method="post" action="">
<input name="password" type="pawssord"/>
</form>
3.单选按钮:
<form method="post" action="">
<input name="radio" type="radio"/>男
<input name="radio" type="radio"/>女
</form>
4.复选框:
<form method="post" action="">
<input type="checkbox" name="1"/>聊天
<input type="checkbox" name="1"/>玩游戏
<input type="checkbox" naem="1"/>运动
</form>
5.列表框:
<form method="post" action="">
<select>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">农村</option>
</select>
</form>
6.按钮选项:
<button>普遍按钮,<submit>提交按钮,<reset>重置按钮。
<form method="post" action="">
<input type="button" value="普遍按钮"/>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
</form>
7.多行文本框:
<form method="post" action="">
<textarea cols="40" rows="6">
您想输入的内容:
</textarea>
</form>
8.文本域:
<form method="post" action="" enctype="multipart / form-data">
<input type="file" />
<input type="submit" balue="上传"/>
</form>
9.邮箱:
<form method="post" action="">
<input type="email"/>
<input type="submit" value="提交”/>
</form>
10.网址:
<form method="post" action="">
<input type="url"/>
<input type="submit"/>
</form>
11.数子:
<form method="post" action="">
<input type="number" min="0" max="100" step="10"/>
<input type="submit"/>
</form>
12.滑块:
<form method="post" action="">
<input type="range" min="0" max="100" step="10"/>
<input type="submit"/>
</form>
13.搜索框:
<form method="post" action="">
<input type="search"/>
<input type="submit" value="GO"/>
</form>
14.表单的高级隐藏域:
<form method="post" action="">
用户名:<input trpe="text" name="name"/ >
密码:<input type="password" name="password"/>
<input type="submit" value="提交"/>
<input type="hidden" value="666"/>
</form>
15.表单的只读和禁用:
<form method="post" action="">
用户名:<input trpe="text" name="name" value="张三" readonly/>
密码:<input type="password" name="password"/>
<input type="submit" value="提交" disabled/>
</form>
16.表单元素的标注:
<form method="post" action="">
<lebel for="male">男</lebal>
<input type="radio" id="male"/>
<lebel for="nv">女</lebel>
<input type="radio" id="nv"/>
</form>
17.表单初级验证的方法:
<form method="post" action="">
<input type="search" placeholder="请输入关键字!" required/ >
<input type="submit" value="GO"/>
</form>
总结:
<input>的常用元素:
type:此属性指定表单元的类型。 name:此属性指定表单元的名称。 value:此属性是可选属性,他指定表单元的初始值。
size:此属性指定表单元格的初始宽度。 maxlength:此属性可以用在text和password元素中的输入最大的值。
checked:此属性用于指定按钮是否被选中,当输入类型为radio或checkbox是使用此属性。
<selected></selected>:列表框的默认值。
value:规定的默认值。
min:规定允许的最小值。
max:规定允许的最大值。
step:规定合法数字间隔(如step="2" 则合法(-2,0,2,4等))
readonly: 只读,网站服务器不希望用户修改数据,只显示在表单元格。
disabled:禁用,只有满足某个条件后,才能选用某项功能。