1.初识表单
1.表单标签及表单属性
<form action="URL地址" method="提交方式">
<!--各种表单控件-->
</form>
URL地址:数据提交的地址
提交方式:有两种 一种是post方式 另外一个是get方式
post:提交表单的方式不会改变浏览器地址的状态 表单数据也不会被显示在地址栏中(安全性能高)
get:提交表单的方式会改变浏览器地址的状态 表单数据在URL中清晰的显示出来(安全性能低)
2.< input >标签的常用属性及其格式
< input >的常用属性
1.文本框
语法:
<input type="text">
可用value属性指定默认值和使用maxlength属性指定输入的数据长度
2.密码框
语法:
<input type="password">
输入密码1时会用黑色实心圆点代替 对数据进行遮挡
3.单选按钮
例子:
<form>
性别:
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</form>
希望多个默认选项可用加checked属性
4.复选框
例子:
<p><input type="checkbox" name="1" value="同意">我同意该协议</p>
<p><input type="checkbox" name="1" value="不同意">我不同意该协议</p>
<p><input type="checkbox" name="1" value="半同意">我半同意该协议</p>
<p><input type="checkbox" name="1" value="全同意">我全同意该协议</p>
希望多个默认选项可用加checked属性
5.按钮
语法:
<p><input type="button" value="普通按钮"></p>
<p><input type="submit" value="提交按钮"></p>
<p><input type="reset" value="重置按钮"></p>
button按钮:会显示按钮的value值
submit按钮:表单会将数据提交到action属性所指定的URL
submit按钮:表单中的数据会被清空
6.文件域:
例子:
<form>
<p><input type="file"></p>
<p>input type="submit" value="上传"</p>
</form>
7.邮箱
例子:
<form>
<p><input type="email"></p>
<p>input type="submit" value="提交"</p>
</form>
输入错误的邮箱格式 会提示你
8.网址:
例子:
<form>
<p><input type="url"></p>
<p>input type="submit" value="提交"</p>
</form>
输入错误的网址格式 会提示你
9.数字
例子:
<form>
<p><input type="number" min="10" step="2"></p>
<p>input type="submit" value="提交"</p>
</form>
10.滑块
例子:
<form>
<p><input type="range" min="10" max="100" step="10"></p>
<p>input type="submit" value="提交"</p>
</form>
属性:
max:最大值
min:最小值
value:默认值
step:合法数字的间隔
11.搜索框
例子:
<form>
<p><input type="search"></p>
<p>input type="submit" value="提交"</p>
</form>
3.列表框和多行文本域
1.列表框
<select name="指定列表名称">
<option value="可选项的值" selected="selected">...</option>
<option value="可选项的值">...</option>
<option value="可选项的值">...</option>
。。。
</select>
select标签必须包含一个option
sekected属性表示默认选中 但只能有一个
2.多行文本域
<textarea name="taxtarea" cols="显示的宽度" rows="显示的行数">
</textarea>
4.表单的高级应用
1.表单的隐藏域
例子:
<form method="get">
<p>账号<input type="text" name=""user></p>
<p>密码<input type=" password" name="pass"></p>
<p><input type="hidden" value="123" name="userID"></p>
<p>input type="submit" value="提交"</p>
2.表单的只读和禁用
readonly和disabled属性可以实现对账号文本框的只读和禁用
3.表单元素的标注
语法:
<laber for="表单元素的id">标注的文本</label>
在选择时文本点击也可以选到
5.表单验证
placeholder属性
<form>
<p>账号<input type="text" value="张三" readonly></p>
</form>
文本框带有提示语 有输入则会被消失
required属性
<form>
<p>账号<input type="text" required></p>
<p>input type="submit" value="提交"</p>
</form>
没有输入任何内容则会提示
pattern属性
当用户输入的内容不符会弹出提示语