关于HTML的初识II

part1. HTML初识

                      --学习平台：https://www.imooc.com/learn/9

 

1、html表单标签

        表单(form)：指将浏览者输入的数据传送到服务器端，使得服务器程序可以处理表单传送的数据

1.1   form标签：用于创建表单
        语法：<form   method="传送方式"    action="服务器文件">     ...   </form>

         注：所有的表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>之间，否则用户的信息会提交不到服务器上。

1.2   表单控件：

（1）输入框：

  语法：

     <input     type="..."   value="值"    name="名称"  / >

    <input   type="text /password  /number  /url  /email"   name="名称"     value="文本" /  >     

    <input   type="text /password"    placeholder="请输入。。。">

     <input type="radio/checkbox"  value="值"  name="名称"  checked="checked" />

    <input  type="submit"  value="提交">

    <input  type="reset"  value="提交">

 

    属性：

    i.  type="text"为文本输入框，type="password"为密码输入框；

    ii.  type="number"为数字输入框；  type="url"为网址输入框； type="email"表示为邮箱输入框（必须包含@）

    iii.  adio/checkbox：单选框/复选框

    iv.   按钮：输入框的type属性设置为submit  /  reset； value：按钮上显示的文字

 

   其他：

   name：文本框的名字；或者说是控件的名字

   注：同一组的单选按钮，name取值要一致，同一组的单选按钮才会有作用，

   eg:

    <form action="save.php" method="post">
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1" name="gender" />
    <label>女</label>
    <input type="radio" value="2" name="gender" />
    </form>

   value：文本框的默认值；提交数据到后台的值

   placeholder ：表示占位符，作为提示用户输入输入框的内容，也就是提示信息

   check="checked"表示默认选中的选项

 

 

（2）文本域- -<textarea>标签：用于创建文本域- -输入大段的文字

      语法：<textarea  rows="行数"  cols="列数"> 文本（默认值） </textarea>

 

（3）lable标签：为鼠标用户提供可用性；标签的for属性值应当与相关键的id属性值相同

      语法：<lable   for="控件id名称'>...</lable>

      eg.<form>

                 <lable  for="email">请输入邮箱地址</lable>

                 <input type="email"  id="email"  placeholder="Enter email">

           </form>

 

（4）下拉菜单：select、option标签，

      selection标签里只能放option标签，表示下拉列表的选项；option标签放选项内容，不能放其他标签；selectde="selected"表示该选项被默认选中

      语法：<select> 

                 <option    selected ="selected"    value="提交值">. 选项..</option>

                </select>

  

2、其他，补充- -body的标签：

footer标签：定义底部区域
section标签：定义区段，但作用等于div，只是具备了语义化
aside标签：定义侧边栏区域