初始表单
表单标签及表单属性
<form >标签用于为用户创建表单,以实现用户信息的收集和传递。
语法
<form action="URL地址"method="提交方式">
<!--各种表单控件-->
</form>
post安全性高get安全性低。
<input>标签的常用属性及其格式
文本框
文本框用于输入单行的文本信息。
size长度,maxlength字符。
语法
<input type="text">
密码框
将文本框控制件的type属性设置为password,可对输入的数据进行遮挡。
语法
<input type="password">
单选按钮
不与许多个选项,单选按钮用于一组互相排斥的值,用户只能从选项列表中选择一项。
语法
<input tupe="radio"name="sex"value="男">
复选框
可选一个或多个,类型为:checkbox,表单元素:type属性设置为checkbox就可以创建复选框,与单选按钮一样,复选框也可以设置默认值,同样使用checked。
语法
<input type"checkbox"name="language"value="Chinese"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属性
当用户输入的内容不符会弹出提示语