前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Html 表单

Html 表单

原创
作者头像
久绊A
发布2023-03-24 16:20:12
3.7K0
发布2023-03-24 16:20:12
举报
文章被收录于专栏:IT-Learning-NotesIT-Learning-Notes

一、表单语法

代码语言:javascript
复制
<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>

二、表单元素格式

代码语言:javascript
复制
<input  type="text"  name="fname" value="text"/>

三、文本框

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

四、密码框

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

五、单选按钮

代码语言:javascript
复制
<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

六、复选框

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

七、列表框

代码语言:javascript
复制
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>

八、按钮

代码语言:javascript
复制
<input  type="reset" name="butReset" value="reset按钮">
<input  type="submit" name="butSubmit" value="submit按钮">
<input  type="button" name="butButton" value="button按钮"/>

九、多行文本域

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

十、文件域

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

十一、网址

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

十二、数字

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

十三、滑块

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

十四、隐藏域

代码语言:javascript
复制
<input type="hidden" value="666" name="userid">

十五、只读和禁用

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

十六、表单初级验证的方法

表单验证的好处?

减轻服务器的压力,保证数据的可行性和安全性

1、Placeholder

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

2、Required

代码语言:javascript
复制
<input type="text" name="username"  required/>

3、Pattern

代码语言:javascript
复制
<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、表单语法
  • 二、表单元素格式
  • 三、文本框
  • 四、密码框
  • 五、单选按钮
  • 六、复选框
  • 七、列表框
  • 八、按钮
  • 九、多行文本域
  • 十、文件域
  • 十一、网址
  • 十二、数字
  • 十三、滑块
  • 十四、隐藏域
  • 十五、只读和禁用
  • 十六、表单初级验证的方法
    • 表单验证的好处?
      • 1、Placeholder
        • 2、Required
          • 3、Pattern
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档