表单元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/chenHaiJaheike/article/details/82707556

表单的语法

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

method：规定如何发送表单数据，常用值：get  | post
action：表示向何处发送表单数据
经验：在实际网页开发中通常采用post方式提交表单数据

表单元素（from）

<input type="text" name="fname" value="text"/>

type：input元素类型
name：input元素名称
value：input元素的值

文本框（text）

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

size：文本框长度

☆重点：当type取值为text时为文本框，name属性是必须的，不可省略

密码框（password）

<input  type="password "  name="pass"  size="20" />

password ：密码框

☆重点：当type取值为password时为密码框，name属性是必须的，其他属性并不是必须的，实际开发中通常不设置value初始值。

单选按钮（radio）

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

radio：单选按钮
value：值
checked：单循按钮选中状态

☆重点：当type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的。同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥。

复选框（checkbox）

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

checkbox：复选框
value：值
checked：复选框选中状态

☆重点：当type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。同一组复选框，根据需要可设置name属性值相同，也可不同。

列表框（select）

<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>

select：列表框
selected：默认选中项
option ：选项

注意：一个中至少包含一下。
重点：name和value属性是必须的，其他属性并不是必须的。

按钮（reset）

重置按钮（reset）
图片按钮（submit）
提交按钮（button）

<input  type="reset" name="butReset" value="reset按钮">
<input  type="image"  src="images/login.gif" />
src：图片路径
<input  type="button" name="butButton" value="button按钮"/>

value：按钮上显示的文字

☆重点：对比讲解三种按钮的语法,说明type取值不同表示不同的功能，讲解各种按钮的功能。name和value属性是必须的，其他属性并不是必须的。

多行文本域（textarea ）

<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
textarea ：多行文本域
cols：显示的列数
rows：显示的行数
☆重点：强调多行文本域的内容是在和之间

文件域（file）

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

file：文件域

☆重点：强调在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。简单说明即或，并且告诉学员这部分的内容，在后续课程中会有详细的讲解。

邮箱（email）

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>

注意：会自动验证Email地址格式是否正确

网址（url）

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<input type="submit"/>

注意：会自动验证URL地址格式是否正确

数字（number）

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>

min：最小值
max：最大值
step：合法的数字间隔

滑块（range）

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>

min：最小值
max：最大值
step：合法的数字间隔

搜索框（search）

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
<input type="submit"/>

表单的高级应用

隐藏域（hidden）
只读（disabled ）
禁用（disabled ）

隐藏域（hidden）

<input type="hidden" value="666" name="userid">

只读和禁用（readonly和disabled ）

——HTML5规定对于布尔类型的属性，属性值可以省略，默认值为true

<input name="name" type="text" value="张三"  readonly>
<input type="submit "  disabled   value="保存" >