表单：表单主要用来制作动态网页，方便和用户进行交互

表单语法：

<form method=" " action=" " enctype="multipart/form-data"></form>

enctype在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

method值可以为：get/post（实际开发中用post传递给服务器）

action表示向何处发送表单数据（地址）

表单元素：

语法：

<input  type="text"(input元素类型) name="fname" value="text">

type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

文本框：text

<input type="text" name="text" value="文本框" size="30" maxlength="10"/>

size:文本框长度

maxlength:文本框输入最多字符

密码框：password

 <input type="password" name="password" size="30"/>

单选按钮：

<input checked name="gender" type="radio" value="男" />男
<input name="gender" type="radio" value="女" />女
<input name="gender" type="radio" value="组合" />组合

checked:选中状态

复选按钮：

<input  checked name="sport" type="checkbox" value="篮球" />篮球
<input name="sport" type="checkbox" value="足球" />足球
<input name="sport" type="checkbox" value="棒球" />棒球

按钮:

<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" / >
<input type="button" value="一般按钮" />
图片按钮
<input type="image"  src="./renren.gif" />

下拉列表：

<select  name="列表名称" size="行数">
<option value="选项的值" selected>…</option>
<option value=选项的值>…</option >
</select>

selected:默认选中项

size:下拉列表显示的行数

多行文本域：

<textarea  name="text " cols="x"  rows="y">文本内容
</textarea  >

cols:显示的列数

rows:显示的行数

文件域：

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

邮箱：会自动验证Email地址格式是否正确

 <input type="email" name="email" id="box" required/>

网址：会自动验证URL地址格式是否正确

<p>请输入你的网址:<input type="url"  name= "url "/></p>
<input  type=submit/>

数字：number数字

<input type="number" name="number" value="数字" min="0"max="100" step="10" />

min:允许最小值

max:允许最大值

step:合法数字间隔

滑块：效果图

<input type="range" name="range"  min="0" max="10000000" />

range(滑块） min:允许最小值 max:允许最大值

搜索框：search

<input type="search" name="search" />

隐藏域：hidden

<input type="hidden" value="隐藏内容" name="info" />

只读和禁用：

<input name="text " type= "text"  readonly/>
<input type= "submit"   disabled   value="保存"/>

表单元素的标注：

 <label for="box">确认密码  </label><input type="password" name="password" id= "box"  required />

表单初级验证方法：

placeholder:

input类型的文本框提供一种提示可以描述文本框期待用户输入何种内容，提示语默认显示，当文本框中输入内容时提示语消失。

适合于input标签：text、search、url、email和password等类型

required:

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

pattern:

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

  <input  type="text"  id="text " required pattern="[-\w\u4E00-\u9FA5]{4,10}"  placeholder="昵称"/>

HTML- 表单(简单易懂）相关推荐

Django练习——基于Mysql的登录注册功能界面(django模型、模板、表单简单应用)
目录 1.创建 2.配置Mysql (1)连接数据库驱动 (2)创建表格 (3)创建迁移文件并同步到数据库 3.admin后台 (1)创建超级用户 (2)注册模型login_msg 4.路由与视图 4 ...
fieldset在form中的用法（表单简单实例）
fieldset:对表单进行分组,一个表单可以有多个fieldset. fieldset标签会在包含的文本和input等表单元素外面形成一个方框,legend元素作为标题. <html> ...
HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...
用python完成99九九乘法表（简单易懂）
我在这之前看了一下其他人写的,其中一步用的的都是f'{}'这种形式我询问了一下,发现用的是format的函数,我还并没有掌握,所以用一些基础的没掌握format函数可以看懂的写了三种方法. 欢迎提出问 ...
Form表单简单用户登录
1.jsp页面 <div id="loginFormDiv"> <div id="loginHeader"><p>欢 ...
Flask开发系列之Web表单
Flask开发系列之Web表单简单示例 from flask import Flask, request, render_templateapp = Flask(__name__) @app.rou ...
css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
目录 1.遮罩层的制作 2.信息层 3.往白色的块里添加表单 1.遮罩层的制作 <!DOCTYPE html> <html lang="zh-CN"> ...
angularjs 表单验证和页面初始化闪烁
1.页面初始化闪烁因为angularjs需要先解析html页面的指令的,才可以启动指令功能.angularjs需要等待整个文档加载完成才会解析,所以会出现一些{{xxx}}, ng-show, ng ...
细说 Form (表单)
细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源.虽然Asp.net WebForms框架为了帮助我 ...
UI登录表单使用模板素材
如何设计不难用的UI表单? 1.表单最重要的第一件事情是建立信任(build trust) 2.提供用户足够的意图(intention) 3.使用在情境下最适合的控制元件(UI patterns)以减 ...

HTML- 表单(简单易懂）