HTML学习之表单

来源：互联网发布：ipad装旧版软件编辑：程序博客网时间：2024/05/17 02:10

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>

阅读全文

0 0