一、什么是表单
表单就是专门用来收集用户信息的
二、表单元素
1、元素:在html中标签/标记/元素都是指html的标签
2、常见表单元素:
2.1、input标签:有一个type属性,这个属性有很多类型的取 值,取值的不同决定了input标签的功能和外观
<form action="https://www.baidu.com/">
<!--明文输入-->
账号:<input type="text" name="aa"><br>
<!--暗文输入-->
密码:<input type="password" name="bb"><br>
<!--输入默认值-->
账号:<input type="text" value="hello"><br>
<!--单选框-->
性别:
<input type="radio" name="xx">男
<input type="radio" name="xx">女
<input type="radio" name="xx" checked="checked">保密
<!--注意点:
1、默认情况下单选框不会互斥,想要单选框互斥必须给每个单选框添加一个name属性,且name属性值相同
2、要想让单选框默认选中某个框子,需要给input标签添加一个checked属性
3、若给多个单选框设置checked默认值,只会将设置默认的最后一个单选框设置默认
-->
<!--多选框-->
<br>
爱好:
<input type="checkbox">篮球
<input type="checkbox"checked="checked">足球
<input type="checkbox" checked="checked">羽毛球
<!--注意点:
3、若给多个多选框设置checked默认值,那么这些多选框都会被设为默认
-->
<!--普通按钮:可以通过value属性来给按钮指定标题,配合js完成一些操作-->
<input type="button" value="按钮">
<!--图片按钮-->
<input type="image" src="IMG_0739.JPG">
<!--重置按钮:清空表单中已经填写好的数据-->
<input type="reset" value="清空">
<!--注意点:如果像改按钮上的"重置"默认标题,可通过value属性来修改-->
<!--提交按钮:将表单中已经填写好的数据提交到远程服务器-->
<input type="submit">
<!--注意点:提交到服务器必须具备两个条件
1、需要给form表单添加一个action属性,指定服务器地址
2、需要给这个表单中想要提交的内容添加一个name属性,如账号/密码
-->
<!--隐藏域:配合提交按钮将一些数据悄悄的提交到服务器-->
<input type="hidden" name="cc" value="yyy">
</form>
2.2、lable标签:默认情况下文字和输入框是没有关联关系的,也就是说点击文字输入框不会聚焦,如果想点击文字时让对应的输入框聚焦,那么就需要让文字和输入框进行绑定,可使用lable标签完成该绑定
绑定格式:1、将文字利用lable标签包裹起来
2、给输入框添加id属性
3、在lable标签中通过for属性和输入框中的id进行绑定 即可
<form action="">
<label for="account">账号:</label><input type="text" id="account"><br>
<label for="pwd">密码:</label><input type="password" id="pwd"><br>
</form>
2.3、datalist标签:给输入框绑定待选项(众多浏览器不支持datalist标签,所以不常用)
如何给输入框绑定待选列表:
1、创建一个输入框
2、创建一个datalist列表
3、给datalist标签添加一个id
4、给输入框添加一个list属性,该list的值为datalist标签的id属性的值
请输入你的车型:<input type="text" list="cars">
<datalist id="cars">
<option>宝马</option>
<option>奔驰</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
2.4、select标签:用于定义下拉列表,下拉列表不能输入内容,只能从列表中选择;可以通过option标签添加一个select属性来指定列表的默认值;可以通过给option标签包裹一层optgroup标签来给下拉列表的数据进行分类
<select>
<optgroup label="北京">
<option selected="selected">朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="广州">
<option>天河区</option>
<option>越秀区</option>
</optgroup>
</select>
2.5、textarea标签:定义一个多行输入框;默认情况下输入框可以无限换行,有自己的宽高,可通过cols和rows来指定输入框的宽高,但是还是可以无限往下输入;默认情况下输入框是可以手动拉伸的
<textarea cols="2" rows="5"></textarea>
小练习:
<body>
<form action="https://www.baidu.com/">
<p>
账号:<input type="text" name="account">
</p>
<p>
密码:<input type="password" name="pwd">
</p>
<!--注意点:单选框和多选框指定的name值要一样-->
<p>
性别:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" checked="checked">保密
</p>
<p>
爱好:
<input type="checkbox" name="sport">篮球
<input type="checkbox" name="sport">足球
<input type="checkbox" checked="checked" name="sport">羽毛球
</p>
<p>
简介:
<textarea cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日:
<input type="date" name="date">
</p>
<p>
邮箱:
<input type="email" name="email">
</p>
<p>
电话:
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="清空">
</p>
</form>
</body>