表单。

表单标签及表单属性:

在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:禁用,只有满足某个条件后,才能选用某项功能。

原文地址:https://www.cnblogs.com/matianpeng/p/7454568.html