html5课后记录3（学习自用）

2021-12-06 11:32:30 阅读：151 来源： 互联网

form表单学习

<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：表示向何处发送表单数据

常用属性

文本框输入内容提示

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

必填项

<input type="text" name="username"  required/>

验证规则，正则表达式

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

正则表达式的基本应用

昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"
密码：pattern="[\dA-Za-z]{6,16}"
手机号码：pattern="1[3578]\d{9}"
年龄：pattern="\d|[1-9]\d|1[0-2]\d"

文本框

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

密码框

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

单选按钮

选中时需先通过name把多个单选按钮分为一组达成选中单一按钮的效果

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" 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="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>

重置按钮，提交按钮和普通按钮

<input  type="reset" name="butReset" value="reset按钮">
<input  type="submit" name="butSubmit" value="submit按钮">
<input  type="button" name="butButton" value="button按钮"/>

多行文本域

<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>

邮箱

<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 name="name" type="text" value="张三"  readonly>
<input type="submit "  disabled   value="保存" >

表单元素标注

<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

标签：pattern,表单,自用,html5,课后,按钮,单选,文本,输入
来源： https://blog.csdn.net/m0_59700265/article/details/121742300

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9