HTML5-表单标签

来源：互联网发布：tensorflow 编程语言编辑：程序博客网时间：2024/06/08 01:17

一、什么是表单
表单就是专门用来收集用户信息的

二、表单元素
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="注册">&nbsp;&nbsp;&nbsp;        <input type="reset" value="清空">    </p></form></body>

阅读全文

0 0