html5——表单

时间：2024-07-11 10:05:30

目录

表单基本结构

表单标签 

 常用表单元素

文本框 

密码框 

邮箱 

单选按钮 

复选框 

文件域 

 隐藏域

 列表框

多行文本域 

lable标签 

表单按钮 

常用表单属性 

只读与禁用 

 placeholder

required

pattern

autofocus

autocomplete

用于指定表单是否有自动完成功能 ：

 

表单基本结构

  • 表单标签 
  • 表单域
  • 表单按钮

     <form method="post" action="https://baike.baidu.com/item/html5">

            输入搜索信息：<input type="text">

            <input type="submit" value="百度一下">

    </form>

表单标签 

 <form  name【表示表单名称】="login" method【规定如何发送表单数据常用值：get  | post】="post" action【表示向何处发送表单数据】="https://baike.baidu.com/item/html5">

        输入搜索信息：<input type="text">

        <input type="submit" value="百度一下">

</form>

 常用表单元素

<input  type="text" 【input元素类型】 name="fname" 【input元素名称】value="text"【input元素的值】/> 

 

文本框 

<input  type="text"【文本框】  name="userName"【文本框名称】 value="用户名" 【文本框初始值】size="30"【文本框显示的宽度】 maxlength="20"【文本框可输入最多字符数】 /> 

密码框 

<input  type="password "【密码框】  name="pass"  【密码框的名称】size="20"【密码框的长度】 /> 

邮箱 

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

<input type="submit"/>

单选按钮 

<input name="gen" type="radio" 【单选按钮框】value="高职" 【值】 checked  【单选按钮选中状态】/>高职

<input name="gen" type="radio" value="本科"  />本科

<input name="gen" type="radio" value="硕士" />硕士

复选框 

<input type="checkbox" 【复选框】name="city" value="北京"【值】/>北京

<input type="checkbox" name="interest" value="上海" checked 【复选框选中状态】/>上海

<input type="checkbox" name="interest" value="南京"/>南京

<input type="checkbox" name="interest" value="其他"/>其他

文件域 

<form action="" method="post" enctype="multipart/form-data"【表单编码属性】>

  <p><input type="file"【文件域】 name="files" />

  <input type="submit" name="upload" value="上传" /></p>

</form>

 隐藏域

 <input type="hidden" 【 隐藏域】value="666" name="hidden">

 列表框

<select【列表框】 name="Certificates" size="1"【下拉菜单的可见选项数】 multiple【项目的多选属性】>

   <option 【选项】value="身份证" selected="selected【默认选中项】">身份证</option >

   <option value="护照">护照</option >

   <option value="军官证">军官证</option >

</select>

多行文本域 

<textarea【多行文本域 】  name="comment"  cols="x"  【显示的列数】rows="y"【显示的行数】> 认真负责、性格活泼</textarea  > 

lable标签 

增强鼠标的可用性 

自动将焦点转移到与该标注相关的表单元素上

语法1

<label for="male"【表单元素的id，根据实际id值进行设置】>标注的文本</label>

<input type="radio" name="gender" id="male"【表单元素id】/>

 语法2

<label> <input type="radio"> </label>

表单按钮 

 

 

<input  type="button"【普通按钮】 name="butButton" value="button按钮"【按钮上显示的文字】/>

<input  type="submit"【提交按钮】 name="butSubmit" value="submit按钮">

<input  type="reset"【重置按钮】 name="butReset" value="reset按钮">

<input  type="image" 【图像按钮】 src="images/login.gif" 【图片路径】/>

常用表单属性 

 

只读与禁用 

<input name="name" type="text" value="张三"  readonly【只读文本框】>

<input type="submit "  disabled 【禁用】  value="保存" >

 placeholder

  1. input类型的文本框提供一种提示（hint）
  2. 可以描述文本框期待用户输入何种内容
  3. 提示语默认显示，当文本框中输入内容时提示语消失
  4. 适合于input标签：text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"【文本框输入内容提示】/> 

required

  1. 规定文本框填写内容不能为空，否则不允许用户提交表单
  2. 适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

<input type="text" name="username"  required【必填项】/> 

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" 【验证规则，正则表达式】/> 

autofocus

用于指定页面加载后是否自动获取焦点

<input type="text" name="word"  autofocus 【自动获取焦点属性】/>

autocomplete

用于指定表单是否有自动完成功能 ：

将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在下拉列表中，以实现自动完成功能

<form action=""  autocomplete="off"【自动完成功能，默认完成值为on】/> 

相关文章