表单元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/lijiehao123456/article/details/72804368

20170528_表单学习

今天学习的是关于表单的部分，记下自己的学习进度，留下自己学习痕迹。

<from></from>创建表单所有表单内容都写在这里面

<input/>创建文字段，单/复选框，按钮等等

<labelfor="pwd">密码</label>
<inputid="pwd"name="pwd"type="password"value="1"maxlength="6">

文本框和密码框写法基本一致。

Lable :指表单控件获得焦点

Lable 里的for=” ”和input里的id=” ”要相等

Maxlength=”n”表示最大输入个数为n

Checked 表示默认选择项

Value=”n” 表示被选项向服务器返回的值为n;

Type 指定元素的类型：text,password,checkbox,radio,file....

<select></select>创建下拉列表

Size 选项的数目，multiple可选择多个选项

Value 选项的值，selected默认选项

<selectname="Book"size="1">
    <optionvalue="1">历史</option>
    <optionvalue="2">文学</option>
    <optionvalue="3"selected="selected">小说</option>
</select>

<textrea></textrea>定义多行文本区

Cols 文本区可见宽度，rows文本区可见行数，

Disabled 禁用该文本，readonly文本区为只读

<h3>多行文本域</h3>
<textareaname="火影"cols="30"rows="5"readonly="readonly">这是一个忍者的世界，并不是我们所认为的黑暗，而是充满着阳光与希望！火影里带给我最多的就是感动，更是让我知道了有一种名为努力型的天才！
</textarea>

自己做的关于表单的练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的使用</title>
</head>
<body>
    <form>
        <h3>文本框</h3>
        <!--for和id的值要相等-->
        <label for="name">姓名：</label>
        <!--maxlength表示最大输入个数为6个-->
        <input id="name" name="name" type="text" value="请输入姓名" maxlength="6">
        <h3>密码框</h3>
        <label for="pwd">密码</label>
        <input id="pwd" name="pwd" type="password" value="1" maxlength="6">
        <h3>复选框</h3>
        <!--checked表示默认的一项-->
        <input name="Subject" type="checkbox" value="1" checked="checked"> HTML
        <input name="Subject" type="checkbox" value="1" > Css
        <input name="Subject" type="checkbox" value="1" > Java
        <h3>单项按钮</h3>
        <input name="sex" type="radio" value="male" checked="checked">男
        <input name="sex" type="radio" value="female">女
        <h3>文件域</h3>
        请选择文件：<input name="file" type="file">
        <h3>按钮</h3>
        <input type="button" value="普通按钮"><br>
        <input type="submit" value="提交按钮"><br>
        <input type="reset" value="重置按钮">
        <p>最后来个图片按钮</p>
        <input type="image" value="" src="images/timg.gif" width="50px" height="50px">
        <h3>下拉列表</h3>
        <select name="Book" size="1" >
            <option value="1">历史</option>
            <option value="2">文学</option>
            <option value="3"selected="selected">小说</option>
        </select>
        <h3>多行文本域</h3>
        <textarea name="火影" cols="30" rows="5" readonly="readonly">这是一个忍者的世界，并不是我们所认为的黑暗，而是充满着阳光与希望！火影里带给我最多的就是感动，更是让我知道了有一种名为努力型的天才！
        </textarea>
    </form>
</body>
</html>

HTML学习之表单