HTML - テキストとドロップダウンボックスの行数内BOBYタグ

エッセイやレコードは、仲間の旅行者へのアクセスを容易にします。

＃私------------------------------------------------ -------------------------------------------分割線は残念です

1 、複数行のテキストコード<TEXTAREA> </ TEXTAREA>

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <タイトル>の入力系列</ TITLE> 
</ HEAD> 
<BODY> 
    <フォームのenctype = " マルチパート/フォーム-data " > 
        <P>描述</ P> 
        <TEXTAREA> </ TEXTAREA> 
        <INPUT TYPE = " 提出"値= " 提交" /> 
        <INPUT TYPE = " リセット"値= "リセット" > 
    </ FORM> 
</ BODY> 
</ HTML>

結果は：

ラップすることができ、コンテンツを入力します。

デフォルト値を増加させるために複数行のテキスト、 <TEXTAREA> </ TEXTAREA> 入力テキストがタグのデフォルト値であります

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <タイトル>の入力系列</ TITLE> 
</ HEAD> 
<BODY> 
    <フォームのenctype = " マルチパート/フォーム-data " > 
        <P>描述</ P> 
        <TEXTAREA>这里填写描述内容</ TEXTAREA> 
        <入力タイプ= " 提出"値= " 提交" /> 
        <INPUT TYPE = " リセット"値= " 重置" > 
    </ FORM> 
</ BODY>
</ HTML>

結果は：

追加することを忘れないでください名前の背景は次のようにデータを提出する必要があるため、属性を

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <タイトル>の入力系列</ TITLE> 
</ HEAD> 
<BODY> 
    <フォームのenctype = " マルチパート/フォーム-data " > 
        <P>描述</ P> 
        <TEXTAREA名= " 萌え" >这里填写描述内容</ TEXTAREA> 
        の<input type = " 提出"値= " 提交" /> 
        <入力タイプ= 「リセット」値= 「重置」> 
    </ FORM> 
</ BODY> 
</ HTML>

結果は：

2 、ドロップダウンボックスの<select> タグに加えて、<オプション> タグ

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <タイトル>の入力系列</ TITLE> 
</ HEAD> 
<BODY> 
    <フォームのenctype = " マルチパート/フォーム-data " > 
        <P>下拉选项</ P> 
        <select>の
            <オプション>北京</オプション> 
            <オプション>上海</オプション> 
            <オプション>南京</オプション> 
            <オプション>成都</オプション> 
        </ >を選択
        = <入力タイプを"提出" =値" 提交" />
        <input type = " リセット"値= " 重置" > 
    </ FORM> 
</ BODY> 
</ HTML>

結果は：

一緒にしたコードの最適化、名前と値の属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">南京</option>
            <option value="4">成都</option>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>

</body>
</html>

结果展示：

现在默认展示为北京，但是我想默认选择为南京，怎么办呢：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected="selected">南京</option>
            <option value="4">成都</option>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：

这样就可以提交下拉框选择的内容了，但是有一个问题是不能多选，继续优化加上size属性让用户可以都看所有选项，加入multiple属性可以多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city" size="10" multiple="multiple">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected="selected">南京</option>
            <option value="4">成都</option>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：按上Ctrl键加鼠标点选

3、下拉框分组：<optgroup>

该标签是给下拉框分组，不可选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city" size="10" multiple="multiple">
            <optgroup label="中国">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
            </optgroup>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：

HTML - テキストとドロップダウンボックスの行数内BOBYタグ

おすすめ