玉不琢，不成器。人不学，不知义
表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能
表单格式
<form>
<div class="form-group">
<label>账号:</label>
<input type="text" value="test1">
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" value="123456">
</div>
<div>
<label>记住密码</label>
<input type="checkbox">
</div>
</form>
单选框
<input type="radio" name="xx" checked="checked">
<label>男</label>
<input type="radio" name="xx">
<label>女</label>
<input type="radio" name="xx">
<label>保密</label>
- 1、默认情况下单选框不会互斥，即可以多选，想要互斥，那么必须给其添加一个
name属性，值可以随便取，但是互斥的几个值必须一样。 - 2、想要单选框默认选中一个，那么可以给其添加一个
checked属性，其值为checked，由于值和属性名一样，所以可以省略值，建议不省略
多选框
<div>
<label>爱好:</label>
<input type="checkbox" checked="checked">
<label>电玩</label>
<input type="checkbox">
<label>旅行</label>
<input type="checkbox">
<label>钓鱼</label>
</div>
按钮
<div>
<input type="button" value="点击看看" onclick="alert('随便')">
<input type="image" src="../static/img/1.jpg" onclick="alert('随便')">
<!--//图片按钮-->
<input type="reset" value="清空">
<!--//重置按钮 默认为重置-->
<input type="submit">
<!--//提交按钮 默认值为提交-->
</div>
其中value为按钮的文字 onclick为点击事件，reset和submit默认值为重置和提交，当然我们可以添加value为其修改值。
submit为提交按钮，是提交到远程服务器
- 1、在哪里指定服务器呢？答案是在
form标签的action属性中来指定，如下
<form action="blogDetail.html">
</form>
这里我将其提交到我本地的blogDetail.html文件、
- 2、指定那些值来提交到服务器
<div class="form-group">
<label>账号:</label>
<input type="text" value="test1" name="loginname">
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" value="123456" name="password">
</div>
在上面，给账号和密码分别指定了两个name属性，并赋值，这样在提交的时候，会将其值提交到服务器，看下面的提交地址
http://localhost:63342/beegoWebForBlog/views/blogDetail.html?loginname=test1&password=123456&xx=on
通过地址我们发现，参数和值分别跟在了地址后面，还有个xx=on，是因为我在单选框的时候也设置了个属性name
当然提交的数据为on这肯定是不行的，所以我们可以对选项卡进行如下的设置
<p>
<label>性别:</label>
<input type="radio" name="sex" value="man">
<label>男</label>
<input type="radio" name="sex" value="woman">
<label>女</label>
<input type="radio" name="sex" value="secret" checked="checked">
<label>保密</label>
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="aihao" value="fish" checked="checked">
<label>钓鱼</label>
<input type="checkbox" name="aihao" value="pashan">
<label>爬山</label>
<input type="checkbox" name="aihao" value="sport">
<label>运动</label>
<input type="checkbox" name="aihao" value="learn">
<label>学习</label>
</p>
就是添加一个value属性，这样就可以让我们明确的知道那个值
隐藏域
有时候我们需要提交一些隐藏的数据，但是又不想给用户展示，那么就有了下面这个方式
<input type="hidden" name="hidden" value="yincangxinxi">
提交后看地址变成如下
http://localhost:63342/beegoWebForBlog/views/blogDetail.html?loginname=test1&password=123456&xx=on&hidden=yincangxinxi
Lable标签
当我们在登录页面的时候，如果点击前面的账号或者密码的时候，需要让后面的输入框进入选中状态的时候，我们可以将lable和input输入标签进行绑定，代码很简单，如下
<div class="form-group">
<label for="login">账号:</label>
<input type="text" value="test1" name="loginname" id="login">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" value="123456" name="password" id="pwd">
</div>
在input中添加一个属性id，并在lable中添加一个for属性，然后将对应的值和其进行绑定即可，效果如下
也可以采取下面的方式来实现点击lable的时候，让输入框进入选中状态
<label>
重新输入密码:<input type="password" value="123456" name="password">
</label>
datalist标签
给输入框绑定待选选项
<input type="text" value="test1" name="loginname" id="login" list="cars">
<datalist id="cars">
<option>宝马</option>
<option>奔驰</option>
<option>奥迪</option>
<option>大众</option>
<option>别克</option>
<option>宾利</option>
</datalist>
将id绑定到input标签中的list属性，由于现在大部分浏览器不支持....所以可以了解
非input标签
-
select:用于定义下拉列表
不能进行输入，但是能进行选择
<select>
<optgroup label="小写字母">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option selected="selected">f</option>//默认选中
</optgroup>
<optgroup label="大写字母">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option selected="selected">f</option>//默认选中
</optgroup>
</select>
效果如下
textarea 相当于ios中的TextView可以无限换行
<textarea cols="2" rows="2">
</textarea>
可以通过cols和rows来指定列数和行数，但是还是可以无限往下输入，并且默认情况下可以通过鼠标进行拉伸
