HTML5-表单form

最新推荐文章于 2021-10-08 21:32:12 发布

FIND方式

最新推荐文章于 2021-10-08 21:32:12 发布

阅读量168

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_43091563/article/details/103055357

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

submit or reset表单中内容

<form action="url" method="get/post" name="" target="">
＊＊*＊＊＊＊单选按钮组
＊＊＊＊＊＊文本
<p>用户名： <label for="name11"><input type="text" id="name11"  placeholder="行车记录仪" size="文本框长度"/></label></p>
<p>密码：<input type="password"/></p>

－单选框－－复选框

<p>性别：<input type="radio" name="sex"/>男
         <input type="radio" name="sex"/>女</p>
相同的name只能选一个

<p>爱好：<input type="checkbox"/>音乐 <input type="checkbox"/>阅读 <input type="checkbox"/>游戏</p>

＊＊＊＊＊＊＊按钮 
	　 <input type="submit"/> %%%提交表单全部内容
      <input type="reset"/>  %%%重置表单全部内容
      <input type="button" value="值"/>  显示无实际意义
      <button></button>      与JS结合
</form>

下拉选择列表selection-option

<p>出生日期：
        <select name="" id="" >
            <option value="2000">2000</option>如果没有默认选择，默认第一个选择
            <option value="2001">2001</option>
            <option value="2002" selected>2002</option> 默认选择
            <option value="2003">2003</option>
        </select>年
 </p>

to slove : select中选项的类付款方式显示

 <input type="file"/> 上传文件

文本域textarea（多行文本框）
<p>备注：
        <textarea name="" id="" cols="列数" rows="行">
            欢迎留言
        </textarea>
</p>

表单分组

<fieldset>
    <legend>表单名字</legend>
    表单内容
</fieldset>

在这里插入图片描述

HTML5表单新增内容

<form action="" method="get" id="myform"></form>
用户名：<input type="text" form="myform"/><br/>
邮箱：<input type="email" form="myform"/><br/>
网址：<input type="url" form="myform"/><br/>
日期：<input type="date" form="myform"/><br/>
时间：<input type="time" form="myform"/><br/>
月：<input type="month" form="myform"/><br/>
周： <input type="week" form="myform"/><br/>
数字：<input type="number" form="myform"/><br/>
滑动条：<input type="range" form="myform"/><br/>
搜索框：<input type="search" form="myform" results="n"/><br/>
颜色： <input type="color" form="myform"/>

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

H5表单属性

属性
novalidate	提交表单时不应该验证 form 或 input 域
autofocus	自动聚焦
plactholder	提示信息 placeholder=“First name”
placeholder颜色	input::-webkit-input-placeholder { color: #0d4123;}
required	必填项
pattren	正则表达式用于验证input 元素的值适用于以下类型的标签: text, search, url, tel, email, 和 password. pattern="[A-Za-z]{3}"
autocomplete	自动记忆适用于form 标签，input标签：text, search, url, telephone, email, password, datepickers, range和color。
min max	适用于以下类型的标签：date pickers、number 以及 range max=“1979-12-31” min=“2000-01-02”