表单:表单主要用来制作动态网页,方便和用户进行交互
表单语法:
<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="昵称"/>