阅读 491

HTML5-表单

表单语法

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

在这里插入图片描述

  • method属性

    • method 属性规定在提交表单时所用的 HTTP 方法
    • 规定如何发送表单数据常用值:get | post
    • 在实际网页开发中通常采用post方式提交表单数据
  • action属性

    • 表示向何处发送表单数据
    • 如果省略 action 属性,则 action 会被设置为当前页面
  • name属性

    • 如果input元素没有name属性,表单数据不会被提交到"result.html"页面
  • < fieldset >

    • < fieldset > 元素组合表单中的相关数据
    • < legend > 元素为 < fieldset > 元素定义标题
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br/>
<input type="text" name="firstname" value="Mickey">
<br/>
Last name:<br/>
<input type="text" name="lastname" value="Mouse">
<br/><br/>
<input type="submit" value="Submit"></fieldset>
</form> 
复制代码

表单元素格式

在这里插入图片描述

在这里插入图片描述

文本框

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

密码框

<input  type="password "  name="pass"  size="20" /> 
复制代码

单选按钮

<input type="radio" name="sex" value="男"  checked  />男
<input type="radio" name=“sex” value="女" />女
复制代码

复选框

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

列表框(下拉列表)

<select name="列表名称" >
  <option value="选项的值" selected>值1</option>
  <option value="选项的值">值2</option>
</select>
复制代码

按钮

<input  type="reset" name="butReset" value="reset按钮"/>
<input  type="submit" name="butSubmit" value="submit按钮"/>
<input  type="button" name="butButton" value="button按钮"/>
<input  type="image"  src="images/login.gif" />
复制代码

多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea>
复制代码

文件域

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

在这里插入图片描述
HTML5 < datalist > 元素

  • < datalist> 元素为 < input > 元素规定预定义选项列表
  • 用户会在他们输入数据时看到预定义选项的下拉列表
  • < input > 元素的 list 属性必须引用 < datalist > 元素的 id 属性
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>
复制代码

邮箱

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>
复制代码

网址

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

数字

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

滑块

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

搜索框

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

表单高级应用

隐藏域

<input type="hidden" value="666" name="userid">
复制代码

只读和禁用

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

在这里插入图片描述

表单的初级验证

表单初级验证的方法

  • placeholder
  • required
  • pattern

placeholder

input类型的文本框提供一种提示(hint)
可以描述文本框期待用户输入何种内容
提示语默认显示,当文本框中输入内容时提示语消失
适合于input标签:text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
复制代码

required

规定文本框填写内容不能为空,否则不允许用户提交表单
适合于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}" />
复制代码

总结

在这里插入图片描述

文章分类
后端
文章标签