[前端学习]hmtl部分学习笔记，第三天

<! - - form表单分为三个部分
1.表单控件，即表单内的各种类型（文本框，下拉框，复选框，提交按钮等），使用input标签并配合type属性来实现各种控件类型
2.提示信息，即对控件的描述
3.表单域，即划分一个区域，把区域中的多个表单控件输入的信息整合起来，一起提交到数据库。
-- >

• fieldset属性可以给form表单设置一个黑线边框，内部还有一个legend标签，可以在边框左上方添加文字标题

<p>用户名：<input type="text" value="请输入您的用户名" /></p>
<!- - type="text"为单行文本输入控件，value为输入框设置默认值 - ->

<p>密码：<input type="password" /></p>
<!- - type="password"为密码输入控件 -->

<! --<input type="radio" />为单选框控件，这里要注意的是必须要把多个选项划分为一组才能实现单选的效果。划分方式就是设置相同的name属性。checked="checked"为默认选中值。value设置值是为了让表单发送出去后，数据库能接送到数据。 -->
<p>您的性别:男<input type="radio" name="sex" checked="checked" value="man"/>
女<input type="radio" name="sex" value="woman" /> </p>
<p>您所在的城市：
重庆<input type="radio" name="adress" checked="checked" value="chongqing" />
四川<input type="radio" name="adress" value="sichuan" />
贵州<input type="radio" name="adress" value="guizhou" /></p>

<!- - <input type="checkbox" />是复选框控件，name属性值不强制要求相同，但实际开发中为了便于接受数据，都会写上相同的name属性值。 -->
<p>您的爱好是： 玩游戏<input type="checkbox" name="hobby" checked="checked" value="game" />
游泳<input type="checkbox" name="hobby" type="warm" />
看电视<input type="checkbox" name="hobby" type="watchTv" />
看书<input type="checkbox" name="hobby" type="readbook" />
踢足球<input type="checkbox" name="hobby" type="football" />
</p>

<!- - 几个表单按钮，提示信息需要写到value属性里 -->
<p>
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="" alt="图片按钮" />
</p>

<!- - 文件域控件，用于选择文件 -->
<p>
上传文件：<input type="file" name="" id="">
</p>

<!- - label标签是用来标记表单控件的，简单来说就是当用户点击到label标签时，会自动将光标焦点到绑定的控件
1.直接包含
2.使用label的for属性和控件的id属性来绑定，但是要注意一个label标签只能绑定一个控件，所以只允许出现一个对应的id值
-->
<p>
<label>输入手机号<input type="text" " /></label>
</p>
<p>
<label for="qqmm">输入qq号</label>
qq号：<input type="text" id="qq" />
qq密码：<input type="password" id="qqmm" />
</p>

<!- - 当需要存放大量字符的时候，就会使用文本域控件。文本域是双标签，其中两个属性值，cols是设置每行的字符数，rows是控制行数 -->
<textarea>请输入内容</textarea>

<!- - 下拉控件select，一般已经用得较少了 -->
<p>你的学科是：
<select>
<option>java</option>
<option>php</option>
<option selected="selected">web</option>
<option>python</option>
</select>
</p>

<!- - 普通按钮<button></button>,与input中的普通按钮不同，这个普通按钮直接是双标签的形式，在实际开发，双标签形式的普通按钮用得比较多，因为好取值 -->
<button>search</button>

<!- - 表单域即用form标签把所有表单控件和提示信息包裹起来，这样就能起到整合该域中所有输入信息的功能。
form的action属性是发送到对应文件url地址的，常用于把数据发送到后端语言文件，用来进行数据库的操作
method属性是指发送的方法，有get和post两种，默认是get方法。但是推荐用post，因为get不安全会在发送地址url后显示出表单输入的数据。
-->
<h2>表单域</h2>
<form action="app.js" method="post" >
用户名：<input type="text" /><br />
密 码：<input type="password" /><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>

<!- - html的多媒体标签，embed是一对双标签。因为兼容性的问题，现在一般不会过多的使用它，而是使用h5的更强大完善的新功能，这里只做一个网络视频地址的引入，做一个了解 -->
<embed src='http://player.youku.com/player.php/sid/XMjk2ODI4ODU2MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>