html常用表单元素属性

常用表单元素属性及事件

按钮常用属性

• formation="login.php":用来创建接受数据的页面
• formmethod="GET":用来表示发送数据请求的方式
• formtarget="_blank":用来表示打开目标的方式

示例

<section>
           <button formaction="login.php" formmethod="POST" formtarget="_blank">登录</button>
           <button formaccton="register.php" formmethod="get" formtarget="_black">注册</button>
</section>

下拉列表常用属性和事件

常用属性

属性名	作用
<select>	创建单选或多选菜单
<option>	创建列表中的可选选项
disabled	禁用该选项
selected	列表默认选项
<optgroup>	列表分组选项

事件

|名称|作用|
|onchange|当选项发生改变时，触发的事件|
|onclick|当点击选项时触发的事件|

示例

<form action="">
        <select
          name="lang"
          id="lang"
          size="10"
          multiple
          onchange="alert(this.value)"
          onclick="alert(this.value)"
          >
            <optgroup label="水果">
               <option value="香蕉">balala</option>
               <option value="葡萄" disabled>葡萄</option>
               <option value="苹果" selected>apple</option>
            </optgroup>
            <optgroup label="饮料">
                <option value="苹果汁">苹果汁</option>
                <option value="草莓子">草莓汁</option>
                <option value="橙子">橙子</option>
            </optgroup>
        </select>
</form>

文本域常用属性和事件

常用属性

• cols=5:用来设置文本域宽度为5
• rows=5:用来设置文本域高度为5
• minlength=5:设置最少长度
• maxlength=20：设置最长可输入字符
• placeholder="不超过2字符":设置提示信息
• form="common":设置表单所属元素

常用事件

事件	作用
onchange	当内容发生改变时，会触发一个对话框
onselect	文本被选中时触发一个对话框

示例

<section>
      <h3>文本域</h3>
      <textarea
         name="reply"
         id="text"
         cols="10"
         rows="10"
         minlength="5"
         maxlength="10"
         placeholer="不少于五个字符"
         onchange="alert('内容不符')"
         onselect="this.style.color='blue'"
      >

表单分组常用属性

名称	作用
<fieldset>	将表单内容打包
<legend>	为分组定义一个标题

示例

<fieldset>
    <legend>售卖区</legend>
    <form action="">
        <select
          name="lang"
          id="lang"
          size="10"
          multiple
          onchange="alert(this.value)"
          onclick="alert(this.value)"
          >
            <optgroup label="水果">
               <option value="香蕉">balala</option>
               <option value="葡萄" disabled>葡萄</option>
               <option value="苹果" selected>apple</option>
            </optgroup>
            <optgroup label="饮料">
                <option value="苹果汁">苹果汁</option>
                <option value="草莓子">草莓汁</option>
                <option value="橙子">橙子</option>
            </optgroup>
        </select>
    </form>
    </fieldset>

上机作业地址

上机作业

html 5小结

通过几天的学习，让我认识到html5标签的语义化的好处，可以精简代码，更好的理解，表单部分老师讲解的也非常好，一些账号注册页面，都含有表单，自己动手打了代码实现之后，可以视觉效果有点丑，但是万丈高楼平地起，一点一点的积累，才能稳中求胜。